<template>
  <div class="messageBoxFather"  ref="messageListRef">
    <div class="screenBox">
    <div class="fenyeqi">
    </div>
    <div v-show='showDetails' @scroll="throttleFn" class="messageBox" ref="messageRef" id="ddddqq" >
      <div class="loadingBoxbottom" style="color:#2196f3;cursor: pointer;" @click="loadMoreData"><i :class="loadClass2" style="color:#2196f3"></i> {{ loadingText2 }}</div>


<!-- 系统消息提示区 -->
<div v-for="(item,index) in messageData" :key="index">
  <div v-if="showPageN" class="chat-sender" id="systemTips" style="margin-bottom:.2rem;margin-top:10px;font-size:12px;color:#ccc;font-weight:100!important;width:200px;word-break: break-word; white-space: normal;">
        {{setPageNumber(index).str}}
      </div>
<!-- *******************************************接收区******************************************************* -->
      <!-- left -->
      <div v-if="item.issend==0">
        <!-- left 系统消息提示 ********************************** -->
      <div :title="item.contant" v-if="item.msgtype==-1012 || item.msgtype==0 || item.msgtype==12" class="chat-sender" id="systemTips" style="margin-bottom:.2rem;margin-top:10px;">
        {{$t('wechat.systemTip')}}：{{item.contant}}
      </div>
      <div v-else-if="item.msgtype==10000 || item.msgtype==10002 || item.msgtype==570425393" class="chat-sender" id="systemTips" style="margin-bottom:.2rem;margin-top:10px;">
        <div :title="formateHongBaoSystem(item)">{{formateHongBaoSystem(item)}}</div>
      </div>
       
      <div :title="item.contant" v-else-if="item.msgtype==268445456 || item.msgtype==352" class="chat-sender" id="systemTips" style="margin-bottom:.2rem;margin-top:10px;">
        {{item.contant}}
      </div>
            <!-- Left --> <!-- 语音 -->
            <div v-else-if="item.msgtype==-2002" class="chat-sender" style="margin-bottom:.2rem;margin-top:10px;">
              <div style="position:relative;">
                <img :src="'http://q2.qlogo.cn/headimg_dl?dst_uin='+item.contactname+'&spec=100'" />
                <div v-if="startPrint" style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button @click="handleClickPrint(item,$event)" size="small" type="text" >添加</el-button></div>
              </div>
              <div><span><span v-if='item.sendernick'>{{item.sendernick}}</span><span v-else>{{item.sendername}}</span></span> <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span> <span style="color:red;" v-if="item.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
              <div class="yuyin" @click="detailsAuideInfo(item)">
                <div class="chat-left_triangle"></div>
                <span><i class="iconfont icon-saying"></i> 语音气泡</span>
                <div v-if="showBiaoJi">
                <div class="badgeBox"  style="display: inline-block;" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                <el-button class="orderBtn" :title="$t('wechat.biaojitishi')" v-else @click.stop="markOrder(item)" type="text" size="mini" style="float:right;color: #000;margin-right:10px" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
              </div>
            </div>
            </div>
            <!-- Left --> <!-- 文本 -->
            <div v-else-if="item.msgtype==1 || item.msgtype==-1000 || item.msgtype==-5008 || item.msgtype==-1049 || item.msgtype==-2009 ||
         item.msgtype==-10000 || item.msgtype==-2059 || item.msgtype==-5008 || item.msgtype==-5020 
         || item.msgtype==-5040 || item.msgtype==-2011 || item.msgtype==-2006 || item.msgtype==17000 ||item.msgtype==-3013 ||item.msgtype==808180" class="chat-sender" style="margin-bottom:.2rem;margin-top:10px;">
              <div style="position:relative;">
                <img :src="'http://q2.qlogo.cn/headimg_dl?dst_uin='+item.contactname+'&spec=100'" />
                <div v-if="startPrint" style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button @click="handleClickPrint(item,$event)" size="small" type="text" >添加</el-button></div>
              </div>
              <div><span><span v-if='item.sendernick'>{{item.sendernick}}</span><span v-else>{{item.sendername}}</span></span> <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span> <span style="color:red;" v-if="item.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
              <div >
                <div class="chat-left_triangle"></div>
                
                <span v-if="!isJsonContent(item.contant)" style="word-wrap: break-word;" v-html='parsingEmoji(String(item.contant))'></span>
                <div v-if="isJsonContent(item.contant)" style="margin:0;width:200px">
                  <p style="font-size:12px">{{formatJsonContent(item.contant).prompt}}</p>
                  <div style="font-size:15px;color:#1890ff;cursor: pointer;" @click="openqqVideowebUrl(formatJsonContent(item.contant).meta.video.pcJumpUrl)">
                    查看看视频内容
                  </div>
                </div>
                <div v-if="showBiaoJi">
                 <div class="badgeBox" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                <el-button class="orderBtn" :title="$t('wechat.biaojitishi')" v-else @click="markOrder(item)" type="text" size="mini" style="float:right;color: #000;margin-right:10px" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
              </div>
            </div>
            </div>

            <!-- Left --> <!-- 文本 -->
            <div v-else-if="item.msgtype==311" class="chat-sender" style="margin-bottom:.2rem;margin-top:10px; ">
              <div style="position:relative;">
                <img :src="'http://q2.qlogo.cn/headimg_dl?dst_uin='+item.contactname+'&spec=100'" />
                <div v-if="startPrint" style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button @click="handleClickPrint(item,$event)" size="small" type="text" >添加</el-button></div>
              </div>
              <div><span><span v-if='item.sendernick'>{{item.sendernick}}</span><span v-else>{{item.sendername}}</span></span> <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span> <span style="color:red;" v-if="item.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
              <div style="background:#fff;">
                <div class="chat-left_triangle" style="background:#fff;"></div>
                <div style="background:#fff;" v-if="formateQQHongbao(item.contant).msgType==2">
                  <img src="../../../assets/images/qq/hongbaofa.png" alt="">
                  <p class="hongbaotitle" style="word-wrap: break-word;">{{formateQQHongbao(item.contant).notice}} </p>
                </div>
                <div style="background:#fff;" v-if="formateQQHongbao(item.contant).msgType==1">
                  <img src="../../../assets/images/qq/zhuanzhang.png" alt="">
                  <p class="hongbaotitle" style="word-wrap: break-word;">{{formateQQHongbao(item.contant).notice}} {{formateQQHongbao(item.contant).title}}</p>
                </div>
              </div>
              <div v-if="showBiaoJi">
              <div class="badgeBox" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                <el-button class="orderBtn" :title="$t('wechat.biaojitishi')" v-else @click="markOrder(item)" type="text" size="mini" style="float:right;color: #000;margin-right:10px" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
            </div>
          </div>
            <!-- Left --> <!-- 小程序 -->
            <div v-else-if="item.msgtype==337" class="chat-sender" style="margin-bottom:.2rem;margin-top:10px;">
              <div style="position:relative;">
                <img :src="'http://q2.qlogo.cn/headimg_dl?dst_uin='+item.sendername+'&spec=100'" />
                <div v-if="startPrint" style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button @click="handleClickPrint(item,$event)" size="small" type="text" >添加</el-button></div>
              </div>
              <div><span><span v-if='item.sendernick'>{{item.sendernick}}</span><span v-else>{{item.sendername}}</span></span> <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span> <span style="color:red;" v-if="item.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
              <div>
                <div class="chat-left_triangle"></div>
                <span style="word-wrap: break-word;">{{qqSystemOther(item.contant).prompt}}</span>
              <div v-if="showBiaoJi">
                <div class="badgeBox" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                <el-button class="orderBtn" :title="$t('wechat.biaojitishi')" v-else @click="markOrder(item)" type="text" size="mini" style="float:right;color: #000;margin-right:10px" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
              </div>
            </div>
            </div>
            <!-- Left --> <!-- 自带表情 -->
            <div v-else-if="item.msgtype==-5018" class="chat-sender" style="margin-bottom:.2rem;margin-top:10px;">
              <div style="position:relative;">
                <img :src="'http://q2.qlogo.cn/headimg_dl?dst_uin='+item.sendername+'&spec=100'" />
                <div v-if="startPrint" style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button @click="handleClickPrint(item,$event)" size="small" type="text" >添加</el-button></div>
              </div>
              <div><span><span v-if='item.sendernick'>{{item.sendernick}}</span><span v-else>{{item.sendername}}</span></span> <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span> <span style="color:red;" v-if="item.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
              <div>
                <div class="chat-left_triangle"></div>
                <span style="word-wrap: break-word;">{{initFormate(item.contant)}}</span>
              <div v-if="showBiaoJi">
                <div class="badgeBox" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                <el-button class="orderBtn" :title="$t('wechat.biaojitishi')" v-else @click="markOrder(item)" type="text" size="mini" style="float:right;color: #000;margin-right:10px" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
              </div>
            </div>
            </div>
            <!-- Left --> <!-- 系统推送 -->
            <div v-else-if="item.msgtype==7141" class="chat-sender" style="margin-bottom:.2rem;margin-top:10px;">
              <div style="position:relative;">
                <img :src="'http://q2.qlogo.cn/headimg_dl?dst_uin='+item.contactname+'&spec=100'" />
                <div v-if="startPrint" style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button @click="handleClickPrint(item,$event)" size="small" type="text" >添加</el-button></div>
              </div>
              <div><span><span v-if='item.sendernick'>{{item.sendernick}}</span><span v-else>{{item.sendername}}</span></span> <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span> <span style="color:red;" v-if="item.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
                  <div style="padding-left:20px;" v-if="formateQQSystem(item).html">
                    <div style="text-indent: 0px;position: relative;" >
                      <div>
                        <div class="chat-left_triangle"></div>
                          <span> 该消息类型暂无法展示<i style="margin-left:15px;color:#faad14;" class="el-icon-warning"></i></span>
                          <span class="viewsInfoDetailsMessages" style="position: relative;left:6%;" @click="viewsErroMessagesDetails(item)">查看详情</span>
                        </div>
                  <div v-if="showBiaoJi">
                      <div class="badgeBox" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                      <el-button class="orderBtn" :title="$t('wechat.biaojitishi')" v-else @click="markOrder(item)" type="text" size="mini" style="float:right;color: #000;margin-right:10px" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
                    </div>
                  </div>
              </div>
              <div v-else-if="formateQQSystem(item).msg._flag==4 ">
                <div class="chat-left_triangle"></div>
                <a :href="formateQQSystem(item).msg._url" target="_blank">
                  <img style="width:100%;" v-if="formateQQSystem(item).msg.item[0].picture" :src="formateQQSystem(item).msg.item[0].picture._cover" alt="">
                </a>
                <p style="word-wrap: break-word;padding-left:10px;">{{formateQQSystem(item).msg.item[0].title}}</p>
              </div>
              <div style="padding-left:20px;" v-else-if="formateQQSystem(item).msg._flag==37">{{formateQQSystem(item).msg._brief}}</div>
              <div v-else>{{formateQQSystem(item).msg._brief}}</div>
              <div v-if="showBiaoJi">
              <div class="badgeBox" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                 <el-button class="orderBtn" :title="$t('wechat.biaojitishi')" v-else @click="markOrder(item)" type="text" size="mini" style="float:right;color: #000;margin-right:10px" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
            </div>
          </div>

        <!-- Right --> <!-- 系统推送 -->
        <div v-else-if="item.msgtype==7337" class="chat-sender" style="margin-bottom:.2rem;margin-top:10px;">
          <div style="position:relative;">
            <img :src="'http://q2.qlogo.cn/headimg_dl?dst_uin='+item.contactname+'&spec=100'" />
            <div v-if="startPrint" style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button @click="handleClickPrint(item,$event)" size="small" type="text" >添加</el-button></div>
          </div>
          <div><span><span v-if='item.sendernick'>{{item.sendernick}}</span><span v-else>{{item.sendername}}</span></span> <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span> <span style="color:red;" v-if="item.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
          <div>
            <div class="chat-left_triangle"></div>
            <p style="word-wrap: break-word;padding-left:10px;">{{formateQQSystemOther(item.contant).desc}}</p>
            <p style="word-wrap: break-word;padding-left:10px;">{{formateQQSystemOther(item.contant).prompt}}</p>
          </div>
          <div v-if="showBiaoJi">

          <div class="badgeBox" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                <el-button class="orderBtn" :title="$t('wechat.biaojitishi')" v-else @click="markOrder(item)" type="text" size="mini" style="float:right;color: #000;margin-right:10px" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
        </div>
      </div>
            <!-- Left --> <!-- 引用 -->
            <div v-else-if="item.msgtype==499 || item.msgtype==-499" class="chat-sender" style="margin-bottom:.2rem;margin-top:10px;">
              <div style="position:relative;">
                <img :src="'http://q2.qlogo.cn/headimg_dl?dst_uin='+item.contactname+'&spec=100'" />
                <div v-if="startPrint" style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button @click="handleClickPrint(item,$event)" size="small" type="text" >添加</el-button></div>
              </div>
              <div><span><span v-if='item.sendernick'>{{item.sendernick}}</span><span v-else>{{item.sendername}}</span></span> <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span> <span style="color:red;" v-if="item.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
              <div>
                <div class="chat-left_triangle"></div>
                <span>{{item.contant}}</span>
          <div v-if="showBiaoJi">
                <div class="badgeBox" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                  <el-button class="orderBtn" :title="$t('wechat.biaojitishi')" v-else @click="markOrder(item)" type="text" size="mini" style="float:right;color: #000;margin-right:10px" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
              </div>
            </div>
            </div>
            <!-- Left --> <!-- 语音通话 -->
            <div v-else-if="item.msgtype==50 || item.msgtype==172" class="chat-sender" style="margin-bottom:.2rem;margin-top:10px;">
              <div style="position:relative;">
                <img :src="'http://q2.qlogo.cn/headimg_dl?dst_uin='+item.contactname+'&spec=100'" />
                <div v-if="startPrint" style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button @click="handleClickPrint(item,$event)" size="small" type="text" >添加</el-button></div>
              </div>
              <div><span><span v-if='item.sendernick'>{{item.sendernick}}</span><span v-else>{{item.sendername}}</span></span> <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span> <span style="color:red;" v-if="item.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
              <div>
                <div class="chat-left_triangle"></div>
                <span>{{item.contant}}</span>
          <div v-if="showBiaoJi">
                <div class="badgeBox" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                      <el-button class="orderBtn" :title="$t('wechat.biaojitishi')" v-else @click="markOrder(item)" type="text" size="mini" style="float:right;color: #000;margin-right:10px" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
                </div>
            </div>
            </div>
            <!-- Left --> <!-- 转发聊天记录 -->
            <div v-else-if="item.msgtype==353 || item.msgtype==-19" class="chat-sender" style="margin-bottom:.2rem;margin-top:10px;">
              <div style="position:relative;">
                <img :src="'http://q2.qlogo.cn/headimg_dl?dst_uin='+item.contactname+'&spec=100'" />
                <div v-if="startPrint" style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button @click="handleClickPrint(item,$event)" size="small" type="text" >添加</el-button></div>
              </div>
              <div><span><span v-if='item.sendernick'>{{item.sendernick}}</span><span v-else>{{item.sendername}}</span></span> <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span> <span style="color:red;" v-if="item.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
              <div style="background:#fff;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);cursor: pointer;padding-bottom:2px;" @click="viewsMessageFriendList(messageRemrd(item.contant))">
                <span class="titleMessageBoxBox" :title="messageRemrd(item.contant).desc">{{messageRemrd(item.contant).desc}}</span>
                <div style="text-algin:left;width:100%;margin-left:12px;font-size:12px;color:#b3b2b2;">
                <p>{{messageRemrd(item.contant).desc}}</p>
                </div>
                <div class="bottomName">聊天记录</div>
          <div v-if="showBiaoJi">
                <div class="badgeBox" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                  <el-button class="orderBtn" :title="$t('wechat.biaojitishi')" v-else @click="markOrder(item)" type="text" size="mini" style="float:right;color: #000;margin-right:10px" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
              </div>
            </div>
            </div>
            <!-- Left --> <!-- 转发聊天记录7 -->
            <div v-else-if="item.msgtype==7" class="chat-sender" style="margin-bottom:.2rem;margin-top:10px;">
              <div style="position:relative;">
                <img :src="'http://q2.qlogo.cn/headimg_dl?dst_uin='+item.contactname+'&spec=100'" />
                <div v-if="startPrint" style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button @click="handleClickPrint(item,$event)" size="small" type="text" >添加</el-button></div>
              </div>
              <div><span><span v-if='item.sendernick'>{{item.sendernick}}</span><span v-else>{{item.sendername}}</span></span> <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span> <span style="color:red;" v-if="item.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
              <div @click="open7(item)" style="background:#fff;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);cursor: pointer;padding-bottom:2px;" >
                <div style="text-algin:left;width:100%;margin-left:12px;font-size:12px;color:#b3b2b2;">
                <p>{{item.title}}</p>
                <p style="padding-left:10px;" >点击查看转发聊天记录</p>
                </div>
                <p style="padding-left:10px;" class="bottomName">聊天记录</p>
          <div v-if="showBiaoJi">
                <div class="badgeBox" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                  <el-button class="orderBtn" :title="$t('wechat.biaojitishi')" v-else @click="markOrder(item)" type="text" size="mini" style="float:right;color: #000;margin-right:10px" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
              </div>
            </div>
            </div>
            <!-- Left --> <!-- 图片 -->
            <div v-else-if="item.msgtype==3 || item.msgtype==2 || item.msgtype==47 || item.msgtype==-1035 || item.msgtype==4096" class="chat-sender" style="margin-bottom:.2rem;margin-top:10px;">
              <div style="position:relative;">
                <img :src="'http://q2.qlogo.cn/headimg_dl?dst_uin='+item.contactname+'&spec=100'" />
                <div v-if="startPrint" style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button @click="handleClickPrint(item,$event)" size="small" type="text" >添加</el-button></div>
              </div>
              <div><span><span v-if='item.sendernick'>{{item.sendernick}}</span><span v-else>{{item.sendername}}</span></span> <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span> <span style="color:red;" v-if="item.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
              <div style="text-indent: 0px;">
                  <div class="demo-image__preview">
 <el-image
                  v-if="item.respath?item.respath:item.thumbpath"
                  style="width:100%; height: 100%"
                  :src="'file:///'+item.respath"
                  :preview-src-list="srcList">
              </el-image>
<span v-else-if="item.contant" style="width:300px;word-break: break-word; white-space: normal;"> 
  {{ item.contant }}
</span>
               <el-image
                  v-else
                  style="width:100%; height: 100%"
                  :src="formateImg(item)"
                  :preview-src-list="srcList">
              </el-image>
                  </div>
          <div v-if="showBiaoJi">
                  <div class="badgeBox" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                  <el-button class="orderBtn" :title="$t('wechat.biaojitishi')" v-else @click="markOrder(item)" type="text" size="mini" style="float:right;color: #000;margin-right:10px" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
              </div>
            </div>
            </div>
            <div v-else-if="item.msgtype==-2000" class="chat-sender" style="margin-bottom:.2rem;margin-top:10px;">
              
              <div style="position:relative;">
                <img :src="'http://q2.qlogo.cn/headimg_dl?dst_uin='+item.contactname+'&spec=100'" />
                <div v-if="startPrint" style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button @click="handleClickPrint(item,$event)" size="small" type="text" >添加</el-button></div>
              </div>
              <div><span><span v-if='item.sendernick'>{{item.sendernick}}</span><span v-else>{{item.sendername}}</span></span> <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span> <span style="color:red;" v-if="item.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
              <div style="text-indent: 0px;" @click="open_2000Img(item.respath)">
                  <div class="demo-image__preview">
                  <el-image
                      style="width:100%; height: 100%"
                      :src="item.respath"
                      :preview-src-list="srcList">
                  </el-image>
                  </div>
                <div v-if="showBiaoJi">
                  <div class="badgeBox" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                  <el-button class="orderBtn" :title="$t('wechat.biaojitishi')" v-else @click="markOrder(item)" type="text" size="mini" style="float:right;color: #000;margin-right:10px" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
              </div>
            </div>
            </div>
            <!-- Left --> <!-- 位置 -->
        <div v-else-if="item.msgtype==48" class="chat-sender" style="margin-bottom:.2rem;margin-top:10px;">
          <div style="position:relative;">
            <img :src="'http://q2.qlogo.cn/headimg_dl?dst_uin='+item.contactname+'&spec=100'" />
            <div v-if="startPrint" style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button @click="handleClickPrint(item,$event)" size="small" type="text" >添加</el-button></div>
          </div>
          <div><span><span v-if='item.sendernick'>{{item.sendernick}}</span><span v-else>{{item.sendername}}</span></span> <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span> <span style="color:red;" v-if="item.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
          <div style="text-indent: 0px;">
              <div class="map">
                <div class="mapTitle">
                      <div style="width: 100%;overflow:hidden;text-overflow:ellipsis;white-space: nowrap;">{{formdatePosition(item)._poiname}}</div>
                      <span style="display:block;color:#6e6e6ea6;width:230px;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space: nowrap;">{{formdatePosition(item)._label}}</span>
                  </div>
                  <p class="mapBox">
                      <position style="float:none;" v-if="formdatePosition(item)" :position="formdatePosition(item)"/>
                  </p>
              </div>
          <div v-if="showBiaoJi">
              <div class="badgeBox" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
              <el-button class="orderBtn" :title="$t('wechat.biaojitishi')" v-else @click="markOrder(item)" type="text" size="mini" style="float:right;color: #000;margin-right:10px" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
          </div>
        </div>
        </div>
            <!-- Left --> <!-- 名片 -->
            <div v-else-if="item.msgtype==42" class="chat-sender" style="margin-bottom:.2rem;margin-top:10px;">
              <div style="position:relative;">
                <img :src="'http://q2.qlogo.cn/headimg_dl?dst_uin='+item.contactname+'&spec=100'" />
                <div v-if="startPrint" style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button @click="handleClickPrint(item,$event)" size="small" type="text" >添加</el-button></div>
              </div>
              <div><span><span v-if='item.sendernick'>{{item.sendernick}}</span><span v-else>{{item.sendername}}</span></span> <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span> <span style="color:red;" v-if="item.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
              <div style="background:#fff;text-indent: 0px;">
                <div class="nameCard" @click="viewsFriendCard(formateCard(item).msg)">
                  <div class="contentNameCard">
                    <img  height="" :src="formateCard(item).msg._bigheadimgurl" alt="">
                    <div class="nameCardNameTExt">{{formateCard(item).msg._nickname}}</div>
                  </div>
                  <div class="nameSiren">个人名片</div>
              <div v-if="showBiaoJi">
                  <div class="badgeBox" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                  <el-button class="orderBtn" :title="$t('wechat.biaojitishi')" v-else @click.stop="markOrder(item)" type="text" size="mini" style="float:right;color: #000;margin-right:10px" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
                </div>
              </div>
              </div>
            </div>
            <!-- Left --> <!-- 文件 -->
        <div v-else-if="item.msgtype==5 || item.msgtype==1090519089 || item.msgtype==-3008 || item.msgtype==-2005" class="chat-sender" style="margin-bottom:.2rem;margin-top:10px;">
          <div style="position:relative;">
            <img :src="'http://q2.qlogo.cn/headimg_dl?dst_uin='+item.contactname+'&spec=100'" />
            <div v-if="startPrint" style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button @click="handleClickPrint(item,$event)" size="small" type="text" >添加</el-button></div>
          </div>
          <div><span><span v-if='item.sendernick'>{{item.sendernick}}</span><span v-else>{{item.sendername}}</span></span> <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span> <span style="color:red;" v-if="item.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
          
          <div v-if="item.respath" style="background:#fff;text-indent: 0px;">
            <div class="nameCard"  @click="downLoadFile(item.respath)">
              <div class="contentNameCard" style="position:relative;">
                <img  height="" src="../../../assets/images/weChatQQ/file.png" alt="">
                <div class="nameCardNameTExt">{{item.contant}}</div>
              <div v-if="showBiaoJi">
                <div class="badgeBox" style="position:absolute;right:-40px;top:-10px;" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                  <el-button class="orderBtn"  :title="$t('wechat.biaojitishi')" v-else @click.stop="markOrder(item)" type="text" size="mini" style="float:right;color: #000;margin-right:10px;position:absolute;right:-20px;top:-10px;" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
              </div>
            </div>
              <div class="nameSiren">点击打开文件</div>
              
            </div>
          </div>
            <div v-else style="background:#fff;text-indent: 0px;" :title="item.contant">
            <div class="nameCard">
              <div class="contentNameCard">
                <img  height="" src="../../../assets/images/weChatQQ/file.png" alt="">
                <div class="nameCardNameTExt">暂无文件路径</div>
              <div v-if="showBiaoJi">
                <div class="badgeBox" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                  <el-button class="orderBtn" :title="$t('wechat.biaojitishi')" v-else @click.stop="markOrder(item)" type="text" size="mini" style="float:right;color: #000;margin-right:10px" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
              </div>
            </div>
            </div>
          </div>
        </div>
            <!-- left --> <!-- 红包2001 链接5 小程序33 共享位置17 转账2000 -->
            <div v-else-if="item.msgtype==49" class="chat-sender" style="margin-bottom:.2rem;margin-top:10px;">
              <div style="position:relative;">
                <img :src="'http://q2.qlogo.cn/headimg_dl?dst_uin='+item.contactname+'&spec=100'" />
                <div v-if="startPrint" style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button @click="handleClickPrint(item,$event)" size="small" type="text" >添加</el-button></div>
              </div>
               <div><span><span v-if='item.sendernick'>{{item.sendernick}}</span><span v-else>{{item.sendername}}</span></span> <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span> <span style="color:red;" v-if="item.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
              <div v-if="formateHongBao(item).msg.appmsg.type==2001" style="background:#fff;text-indent: 0px;position: relative;" >
                 
                <img src="../../../assets/images/weChatQQ/hongbao.png" width="100%" height="100%" alt="">
              <div v-if="showBiaoJi">
                <div class="badgeBox" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                  <el-button class="orderBtn" :title="$t('wechat.biaojitishi')" v-else @click="markOrder(item)" type="text" size="mini" style="float:right;color: #000;margin-right:10px" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
              </div>
              </div>
              <div v-else-if="formateHongBao(item).msg.appmsg.type==2000" style="background:#fff;text-indent: 0px;position: relative;" >
                  <div v-if="formateHongBao(item).msg.appmsg.wcpayinfo.paysubtype==8" class="hongbaotext">转账{{formateHongBao(item).msg.appmsg.wcpayinfo.feedesc}}</div>
                  <div v-if="formateHongBao(item).msg.appmsg.wcpayinfo.paysubtype==4" class="hongbaotext">已退还{{formateHongBao(item).msg.appmsg.wcpayinfo.feedesc}}</div>
                  <div v-if="formateHongBao(item).msg.appmsg.wcpayinfo.paysubtype==3" class="hongbaotext">收到转账{{formateHongBao(item).msg.appmsg.wcpayinfo.feedesc}}</div>
                  <div v-if="formateHongBao(item).msg.appmsg.wcpayinfo.paysubtype==9" class="hongbaotext">已被退还{{formateHongBao(item).msg.appmsg.wcpayinfo.feedesc}}</div>
                  <img src="../../../assets/images/weChatQQ/zhuanzhangleft.png" width="100%" height="100%" alt="">
              <div v-if="showBiaoJi">
                  <div class="badgeBox" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                  <el-button class="orderBtn" :title="$t('wechat.biaojitishi')" v-else @click="markOrder(item)" type="text" size="mini" style="float:right;color: #000;margin-right:10px" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
              </div>
            </div>
              <div v-else-if="formateHongBao(item).msg.appmsg.type==5" style="background:#fff;text-indent: 0px;position: relative;" >
                <a :href="formateHongBao(item).msg.appmsg.url" target="_blank">
                  <div style="text-indent: 0px;background:rgb(233, 233, 233);border:1px solid #ccc;padding-bottom:2px;cursor: pointer;padding:10px;">
                    <div class="hrefBox">
                      <div class="hrefBoxLeftBox">
                        <span class="grefTitleSpan" :title="formateHongBao(item).msg.appmsg.title">{{formateHongBao(item).msg.appmsg.title}}</span>
                        <p class="hrefBoxContentDeatils" :title="formateHongBao(item).msg.appmsg.des">{{formateHongBao(item).msg.appmsg.des}}</p>
                      </div>
                      <div class="hrefBoxrightBox">
                        <img width="100%" height="100%" src="../../../assets/images/weChatQQ/link.png" alt="">
                      </div>
                    </div>
                    <div class="textInfo">分享链接</div>
                  </div>
                </a>
              <div v-if="showBiaoJi">
                <div class="badgeBox" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                  <el-button class="orderBtn" :title="$t('wechat.biaojitishi')" v-else @click="markOrder(item)" type="text" size="mini" style="float:right;color: #000;margin-right:10px" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
              </div>
            </div>
              <div v-else-if="formateHongBao(item).msg.appmsg.type==17" style="background:rgb(233, 233, 233);text-indent: 0px;position: relative;" >
              <div >
                <div class="chat-right_triangle"></div>
                <span>
                  {{formateHongBao(item).msg.appmsg.title}} <i class="el-icon-location-outline"></i></span>
              </div>
              <div v-if="showBiaoJi">
              <div class="badgeBox" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                  <el-button class="orderBtn" :title="$t('wechat.biaojitishi')" v-else @click="markOrder(item)" type="text" size="mini" style="float:right;color: #000;margin-right:10px" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
              </div>
            </div>
              <div v-else-if="formateHongBao(item).msg.appmsg.type==33" style="background:#fff;text-indent: 0px;position: relative;" >
                <a :href="formateHongBao(item).msg.appmsg.url" target="_blank">
                  <div style="text-indent: 0px;background: #fff;border:1px solid #ccc;padding-bottom:2px;cursor: pointer;padding:10px;">
                    <div class="hrefBox">
                      <div class="hrefBoxLeftBox">
                        <span class="grefTitleSpan" :title="formateHongBao(item).msg.appmsg.title">{{formateHongBao(item).msg.appmsg.title}}</span>
                        <p class="hrefBoxContentDeatils" :title="formateHongBao(item).msg.appmsg.des">{{formateHongBao(item).msg.appmsg.des}}</p>
                      </div>
                      <div class="hrefBoxrightBox">
                        <img width="100%" height="100%" src="../../../assets/images/weChatQQ/system.png" alt="">
                      </div>
                    </div>
                    <div class="textInfo">小程序</div>
                  </div>
                </a>
              <div v-if="showBiaoJi">
                <div class="badgeBox" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                  <el-button class="orderBtn" :title="$t('wechat.biaojitishi')" v-else @click="markOrder(item)" type="text" size="mini" style="float:right;color: #000;margin-right:10px" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
              </div>
            </div>
              <div v-else style="background:rgb(233, 233, 233);text-indent: 0px;position: relative;" >
                <div>
                  <div class="chat-left_triangle"></div>
                  <span> 该消息类型暂无法展示<i style="margin-left:15px;color:#faad14;" class="el-icon-warning"></i></span>
                <span class="viewsInfoDetailsMessages" @click="viewsErroMessagesDetails(item)">查看详情</span>
              </div>
              <div v-if="showBiaoJi">
              <div class="badgeBox" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                  <el-button class="orderBtn" :title="$t('wechat.biaojitishi')" v-else @click="markOrder(item)" type="text" size="mini" style="float:right;color: #000;margin-right:10px" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
              </div>
            </div>
            </div>
            <!-- Left --> <!-- 视频 -->
            <div v-else-if="item.msgtype==43 || item.msgtype==-2022 || item.msgtype==181 ||item.msgtype==4" class="chat-sender" style="margin-bottom:.2rem;margin-top:10px;">
              <div style="position:relative;">
                <img :src="'http://q2.qlogo.cn/headimg_dl?dst_uin='+item.contactname+'&spec=100'" />
                <div v-if="startPrint" style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button @click="handleClickPrint(item,$event)" size="small" type="text" >添加</el-button></div>
              </div>
              <div><span><span v-if='item.sendernick'>{{item.sendernick}}</span><span v-else>{{item.sendername}}</span></span> <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span> <span style="color:red;" v-if="item.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
              <div style="text-indent: 0px;">
                  <div class="demo-image__preview">
                    <video  v-if="item.respath && !isJsonContent(item.contant)" width="100%" controls :src="item.respath"></video>
                    <div v-else-if="isJsonContent(item.contant)" style="margin:0;width:200px">
                      <p style="font-size:12px">{{formatJsonContent(item.contant).prompt}}</p>
                      <div style="font-size:15px;color:#1890ff;cursor: pointer;" @click="openqqVideowebUrl(formatJsonContent(item.contant).meta.video.pcJumpUrl)">
                        查看看视频内容
                      </div>
                    </div>
                    <span v-else style="width:300px;word-break: break-word; white-space: normal;"> 
                      {{ item.contant }}
                    </span>
                  </div>
              </div>
              <div v-if="showBiaoJi">
              <div class="badgeBox" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                  <el-button class="orderBtn" :title="$t('wechat.biaojitishi')" v-else @click="markOrder(item)" type="text" size="mini" style="float:right;color: #000;margin-right:10px" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
            </div>
          </div>

            <!-- Left --> <!-- 分享链接 公众号 -->
            <div v-else-if="item.msgtype==486539313 || item.msgtype==285212721" class="chat-sender" style="margin-bottom:.2rem;margin-top:10px;">
              <div style="position:relative;">
                <img :src="'http://q2.qlogo.cn/headimg_dl?dst_uin='+item.contactname+'&spec=100'" />
                <div v-if="startPrint" style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button @click="handleClickPrint(item,$event)" size="small" type="text" >添加</el-button></div>
              </div>
              <div><span><span v-if='item.sendernick'>{{item.sendernick}}</span><span v-else>{{item.sendername}}</span></span> <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span> <span style="color:red;" v-if="item.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
              <div style="text-indent: 0px;background: #fff;border:1px solid #ccc;padding-bottom:2px;cursor: pointer;">
                <div class="hrefBox">
                  <div class="hrefBoxLeftBox">
                    <span class="grefTitleSpan">标题标题标题标题标题标题标题标题标题</span>
                    <p class="hrefBoxContentDeatils">contentsaassadadadaasdasdasdadasdasdasdasdas</p>
                  </div>
                  <div class="hrefBoxrightBox">
                    <img width="100%" height="100%" src="../../../assets/images/weChatQQ/1644384118(1).jpg" alt="">
                  </div>
                </div>
                <div class="textInfo">分享链接</div>
              </div>
              <div v-if="showBiaoJi">
              <div class="badgeBox" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                  <el-button class="orderBtn" :title="$t('wechat.biaojitishi')" v-else @click="markOrder(item)" type="text" size="mini" style="float:right;color: #000;margin-right:10px" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
            </div>
          </div>
          <!-- Left --> <!-- 无法解析 -->
            <div v-else class="chat-sender" style="margin-bottom:.2rem;margin-top:10px;">
              <div style="position:relative;">
                <img :src="'http://q2.qlogo.cn/headimg_dl?dst_uin='+item.contactname+'&spec=100'" />
                <div v-if="startPrint" style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button @click="handleClickPrint(item,$event)" size="small" type="text" >添加</el-button></div>
              </div>
              <div><span><span v-if='item.sendernick'>{{item.sendernick}}</span><span v-else>{{item.sendername}}</span></span> <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span> <span v-if="item.recovery==1"  class="delClass" style="color:red;"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
              <div>
                <div class="chat-left_triangle"></div>
                <span> 该消息类型无法展示<i style="margin-left:15px;color:#faad14;" class="el-icon-warning"></i></span>
              <div v-if="showBiaoJi">
                <div class="badgeBox" style="float:right;" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                  <el-button class="orderBtn" :title="$t('wechat.biaojitishi')" v-else @click="markOrder(item)" type="text" size="mini" style="float:right;color: #000;margin-right:10px" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
              </div>
                  <span class="viewsInfoDetailsMessages(item)" @click="viewsErroMessagesDetails(item)">查看详情</span>
            </div>
            </div>
            
        </div>
<!-- ************************************************发送区******************************************************* -->

    <div v-else>
      <div v-if="item.msgtype==-1012" class="chat-sender" id="systemTips" style="margin-bottom:.2rem;margin-top:10px;">
        {{$t('wechat.systemTip')}}：{{item.contant}}
      </div>
      <div v-else-if="item.msgtype==10000 || item.msgtype==10002 || item.msgtype==570425393" class="chat-sender" id="systemTips" style="margin-bottom:.2rem;margin-top:10px;">
         <div :title="formateHongBaoSystem(item)">{{formateHongBaoSystem(item)}}</div>
      </div>
       
      <div v-else-if="item.msgtype==268445456 || item.msgtype==352" class="chat-sender" id="systemTips" style="margin-bottom:.2rem;margin-top:10px;">
        {{item.contant}}
      </div>
        <!-- Right --> <!-- 文本 -->
        <div v-else-if="item.msgtype==1 || item.msgtype==-1000 || item.msgtype==-5008 || item.msgtype==-1049 || item.msgtype==-2009 ||
         item.msgtype==-10000 || item.msgtype==-2059 || item.msgtype==-5008 || item.msgtype==-5020 
         || item.msgtype==-5040 || item.msgtype==-2011 || item.msgtype==-2006 || item.msgtype==17000 || item.msgtype==-3013 ||item.msgtype==808180"  class="chat-receiver" style="margin-bottom:.2rem;margin-top:10px;">
          <div style="position:relative;">
            <img :src="'http://q2.qlogo.cn/headimg_dl?dst_uin='+item.sendername+'&spec=100'" />
            <div v-if="startPrint" style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button @click="handleClickPrint(item,$event)" size="small" type="text" >添加</el-button></div>
          </div>
          <div><span><span v-if='item.sendernick'>{{item.sendernick}}</span><span v-else>{{item.sendername}}</span></span> <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span> <span style="color:red;" v-if="item.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
          <div>
            <div class="chat-right_triangle"></div>
            <div>
            <span v-if="!isJsonContent(item.contant)" style="word-wrap: break-word;" v-html='parsingEmoji(String(item.contant))'></span>
            <div v-if="isJsonContent(item.contant)" style="margin:0;width:200px">
              <p style="font-size:12px">{{formatJsonContent(item.contant).prompt}}</p>
              <div style="font-size:15px;color:#1890ff;cursor: pointer;" @click="openqqVideowebUrl(formatJsonContent(item.contant).meta.video.pcJumpUrl)">
                查看看视频内容
              </div>
            </div>
              <div v-if="showBiaoJi">
              <div class="badgeBox" style="float:right;" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                <el-button class="orderBtn" :title="$t('wechat.biaojitishi')" v-else @click="markOrder(item)" type="text" size="mini" style="float:right;color: #000;margin-right:10px" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
          </div>
            </div>
          
        </div>
        </div>
        <!-- Left --> <!-- 自带表情 -->
        <div v-else-if="item.msgtype==-5018" class="chat-receiver" style="margin-bottom:.2rem;margin-top:10px;">
          <div style="position:relative;">
            <img :src="'http://q2.qlogo.cn/headimg_dl?dst_uin='+item.sendername+'&spec=100'" />
            <div v-if="startPrint" style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button @click="handleClickPrint(item,$event)" size="small" type="text" >添加</el-button></div>
          </div>
          <div><span><span v-if='item.sendernick'>{{item.sendernick}}</span><span v-else>{{item.sendername}}</span></span> <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span> <span style="color:red;" v-if="item.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
          <div>
            <div class="chat-right_triangle"></div>
            <span style="word-wrap: break-word;">{{initFormate(item.contant)}}</span>
          <div v-if="showBiaoJi">
            <div class="badgeBox" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
            <el-button class="orderBtn" :title="$t('wechat.biaojitishi')" v-else @click="markOrder(item)" type="text" size="mini" style="float:right;color: #000;margin-right:10px" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
          </div>
        </div>
        </div>
         <!-- Right --> <!-- 小程序 -->
        <div v-else-if="item.msgtype==337" class="chat-receiver" style="margin-bottom:.2rem;margin-top:10px;">
          <div style="position:relative;">
            <img :src="'http://q2.qlogo.cn/headimg_dl?dst_uin='+item.sendername+'&spec=100'" />
            <div v-if="startPrint" style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button @click="handleClickPrint(item,$event)" size="small" type="text" >添加</el-button></div>
          </div>
          <div><span><span v-if='item.sendernick'>{{item.sendernick}}</span><span v-else>{{item.sendername}}</span></span> <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span> <span style="color:red;" v-if="item.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
          <div>
            <div class="chat-right_triangle"></div>
            <span style="word-wrap: break-word;">{{qqSystemOther(item.contant).prompt}}</span>
          </div>
        </div>
        <!-- Left --> <!-- 语音通话 -->
        <div v-else-if="item.msgtype==172" class="chat-sender" style="margin-bottom:.2rem;margin-top:10px;">
          <div style="position:relative;">
            <img :src="'http://q2.qlogo.cn/headimg_dl?dst_uin='+item.contactname+'&spec=100'" />
            <div v-if="startPrint" style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button @click="handleClickPrint(item,$event)" size="small" type="text" >添加</el-button></div>
          </div>
          <div><span><span v-if='item.sendernick'>{{item.sendernick}}</span><span v-else>{{item.sendername}}</span></span> <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span> <span style="color:red;" v-if="item.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
          <div>
            <div class="chat-left_triangle"></div>
            <span>{{item.contant}}</span>
            <div v-if="showBiaoJi">
            <div class="badgeBox" style="float:right;" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
              <el-button class="orderBtn" :title="$t('wechat.biaojitishi')" v-else @click="markOrder(item)" type="text" size="mini" style="float:right;color: #000;margin-right:10px" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
          </div>
        </div>
        </div>
           <!-- Left --> <!-- 系统推送 -->
            <div v-else-if="item.msgtype==7141" class="chat-receiver" style="margin-bottom:.2rem;margin-top:10px;">
              <div style="position:relative;">
                <img :src="'http://q2.qlogo.cn/headimg_dl?dst_uin='+item.contactname+'&spec=100'" />
                <div v-if="startPrint" style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button @click="handleClickPrint(item,$event)" size="small" type="text" >添加</el-button></div>
              </div>
              <div><span><span v-if='item.sendernick'>{{item.sendernick}}</span><span v-else>{{item.sendername}}</span></span> <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span> <span style="color:red;" v-if="item.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
              <div style="padding-left:20px;" v-if="formateQQSystem(item).html">
                  <div style="text-indent: 0px;position: relative;" >
                    <div>
                      <div class="chat-left_triangle"></div>
                        <span> 该消息类型暂无法展示<i style="margin-left:15px;color:#faad14;" class="el-icon-warning"></i></span>
                        <span class="viewsInfoDetailsMessages" style="position: relative;left:6%;" @click="viewsErroMessagesDetails(item)">查看详情</span>
                  <div v-if="showBiaoJi">
                        <div class="badgeBox" style="float:right;" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                  <el-button class="orderBtn" :title="$t('wechat.biaojitishi')" v-else @click="markOrder(item)" type="text" size="mini" style="float:right;color: #000;margin-right:10px" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
                      </div>
                    </div>
                  </div>
              </div>
              <div v-else-if="formateQQSystem(item).msg._flag==4 ">
                <div class="chat-right_triangle"></div>
                <a :href="formateQQSystem(item).msg._url" target="_blank">
                  <img style="width:100%;" v-if="formateQQSystem(item).msg.item[0].picture" :src="formateQQSystem(item).msg.item[0].picture._cover" alt="">
                </a>
                <p style="word-wrap: break-word;padding-left:10px;">{{formateQQSystem(item).msg.item[0].title}}</p>
                <p style="word-wrap: break-word;padding-left:10px;">{{formateQQSystem(item).msg._brief}}</p>
              <div v-if="showBiaoJi">
                <div class="badgeBox" style="float:right;" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                <el-button class="orderBtn" :title="$t('wechat.biaojitishi')" v-else @click="markOrder(item)" type="text" size="mini" style="float:right;color: #000;margin-right:10px" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
              </div>
            </div>
              <div style="padding-left:20px;" v-else-if="formateQQSystem(item).msg._flag==37">{{formateQQSystem(item).msg._brief}}
              <div v-if="showBiaoJi">
                <div class="badgeBox" style="float:right;" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                <el-button class="orderBtn" :title="$t('wechat.biaojitishi')" v-else @click="markOrder(item)" type="text" size="mini" style="float:right;color: #000;margin-right:10px" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
              </div>
            </div>
              <div v-else>{{formateQQSystem(item).msg._brief}}
                <div v-if="showBiaoJi">
                <div class="badgeBox" style="float:right;" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                <el-button class="orderBtn" :title="$t('wechat.biaojitishi')" v-else @click="markOrder(item)" type="text" size="mini" style="float:right;color: #000;margin-right:10px" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
              </div>
            </div>
            </div>

        <!-- Right --> <!-- 红包2001 链接5 小程序33 共享位置17 转账2000 -->
        <div v-else-if="item.msgtype==49" class="chat-receiver" style="margin-bottom:.2rem;margin-top:10px;">
          <div style="position:relative;">
            <img :src="'http://q2.qlogo.cn/headimg_dl?dst_uin='+item.sendername+'&spec=100'" />
            <div v-if="startPrint" style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button @click="handleClickPrint(item,$event)" size="small" type="text" >添加</el-button></div>
          </div>
          <div><span><span v-if='item.sendernick'>{{item.sendernick}}</span><span v-else>{{item.sendername}}</span></span> <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span> <span style="color:red;" v-if="item.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
          <div v-if="formateHongBao(item).msg.appmsg.type==2001" style="background:#fff;text-indent: 0px;position: relative;" >
             
            <img src="../../../assets/images/weChatQQ/hongbaoright.png" width="100%" height="100%" alt="">
            <div v-if="showBiaoJi">
            <div class="badgeBox" style="float:right;" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                <el-button class="orderBtn" :title="$t('wechat.biaojitishi')" v-else @click="markOrder(item)" type="text" size="mini" style="float:right;color: #000;margin-right:10px" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
          </div>
        </div>

          <div v-else-if="formateHongBao(item).msg.appmsg.type==2000" style="background:#fff;text-indent: 0px;position: relative;" >
              <div v-if="formateHongBao(item).msg.appmsg.wcpayinfo.paysubtype==8" class="hongbaotext">转账{{formateHongBao(item).msg.appmsg.wcpayinfo.feedesc}}</div>
                  <div v-if="formateHongBao(item).msg.appmsg.wcpayinfo.paysubtype==4" class="hongbaotext">已退还{{formateHongBao(item).msg.appmsg.wcpayinfo.feedesc}}</div>
                  <div v-if="formateHongBao(item).msg.appmsg.wcpayinfo.paysubtype==3" class="hongbaotext">收到转账{{formateHongBao(item).msg.appmsg.wcpayinfo.feedesc}}</div>
                  <div v-if="formateHongBao(item).msg.appmsg.wcpayinfo.paysubtype==9" class="hongbaotext">已被退还{{formateHongBao(item).msg.appmsg.wcpayinfo.feedesc}}</div>
              <img src="../../../assets/images/weChatQQ/rightzhuanzhangright.png" width="100%" height="100%" alt="">
            <!-- </div> -->
            <div v-if="showBiaoJi">
            <div class="badgeBox" style="float:right;" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                <el-button class="orderBtn" :title="$t('wechat.biaojitishi')" v-else @click="markOrder(item)" type="text" size="mini" style="float:right;color: #000;margin-right:10px" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
          </div>
        </div>
          <div v-else-if="formateHongBao(item).msg.appmsg.type==5" style="background:#fff;text-indent: 0px;position: relative;" >
            <a :href="formateHongBao(item).msg.appmsg.url" target="_blank">
              <div style="text-indent: 0px;background: #fff;border:1px solid #ccc;padding-bottom:2px;cursor: pointer;padding:10px;">
                <div class="hrefBox">
                  <div class="hrefBoxLeftBox">
                    <span class="grefTitleSpan" :title="formateHongBao(item).msg.appmsg.title">{{formateHongBao(item).msg.appmsg.title}}</span>
                    <p class="hrefBoxContentDeatils" :title="formateHongBao(item).msg.appmsg.des">{{formateHongBao(item).msg.appmsg.des}}</p>
                  </div>
                  <div class="hrefBoxrightBox">
                    <img width="100%" height="100%" src="../../../assets/images/weChatQQ/link.png" alt="">
                  </div>
                </div>
                <div class="textInfo">分享链接</div>
              </div>
            </a>
            <div v-if="showBiaoJi">
            <div class="badgeBox" style="float:right;" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                <el-button class="orderBtn" :title="$t('wechat.biaojitishi')" v-else @click="markOrder(item)" type="text" size="mini" style="float:right;color: #000;margin-right:10px" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
          </div>
        </div>
          <div v-else-if="formateHongBao(item).msg.appmsg.type==17" style="background:#b2e281;text-indent: 0px;position: relative;" >
          <div >
            <div class="chat-right_triangle"></div>
            <span>
              {{formateHongBao(item).msg.appmsg.title}} <i class="el-icon-location-outline"></i></span>
              <div v-if="showBiaoJi">
              <div class="badgeBox" style="float:right;" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                <el-button class="orderBtn" :title="$t('wechat.biaojitishi')" v-else @click="markOrder(item)" type="text" size="mini" style="float:right;color: #000;margin-right:10px" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
          </div>
        </div>
          </div>
          <div v-else-if="formateHongBao(item).msg.appmsg.type==33" style="background:#fff;text-indent: 0px;position: relative;" >
            <a :href="formateHongBao(item).msg.appmsg.url" target="_blank">
              <div style="text-indent: 0px;background: #fff;border:1px solid #ccc;padding-bottom:2px;cursor: pointer;padding:10px;">
                <div class="hrefBox">
                  <div class="hrefBoxLeftBox">
                    <span class="grefTitleSpan" :title="formateHongBao(item).msg.appmsg.title">{{formateHongBao(item).msg.appmsg.title}}</span>
                    <p class="hrefBoxContentDeatils" :title="formateHongBao(item).msg.appmsg.des">{{formateHongBao(item).msg.appmsg.des}}</p>
                  </div>
                  <div class="hrefBoxrightBox">
                    <img width="100%" height="100%" src="../../../assets/images/weChatQQ/system.png" alt="">
                  </div>
                </div>
                <div class="textInfo">小程序</div>
              </div>
            </a>
            <div v-if="showBiaoJi">

            <div class="badgeBox" style="float:right;" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                <el-button class="orderBtn" :title="$t('wechat.biaojitishi')" v-else @click="markOrder(item)" type="text" size="mini" style="float:right;color: #000;margin-right:10px" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
          </div>
        </div>
          <div v-else style="background:rgb(233, 233, 233);text-indent: 0px;position: relative;" >
            <div>
              <div class="chat-right_triangle"></div>
                <span> 该消息类型暂无法展示<i style="margin-left:15px;color:#faad14;" class="el-icon-warning"></i></span>
            <div v-if="showBiaoJi">
                <div class="badgeBox" style="float:right;" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                <el-button class="orderBtn" :title="$t('wechat.biaojitishi')" v-else @click="markOrder(item)" type="text" size="mini" style="float:right;color: #000;margin-right:10px" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
              </div>
                <span class="viewsInfoDetailsMessages" style="position: relative;left:-270px;" @click="viewsErroMessagesDetails(item)">查看详情</span>
              </div>
          </div>
        </div>
        <!-- Right --> <!-- 图片 -->
        <div v-else-if="item.msgtype==3 || item.msgtype==2 || item.msgtype==47 ||  item.msgtype==-1035 ||  item.msgtype==4096" class="chat-receiver" style="margin-bottom:.2rem;margin-top:10px;">
          <div style="position:relative;">
            <img :src="'http://q2.qlogo.cn/headimg_dl?dst_uin='+item.sendername+'&spec=100'" />
            <div v-if="startPrint" style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button @click="handleClickPrint(item,$event)" size="small" type="text" >添加</el-button></div>
          </div>
          <div><span><span v-if='item.sendernick'>{{item.sendernick}}</span><span v-else>{{item.sendername}}</span></span> <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span> <span style="color:red;" v-if="item.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
          <div style="text-indent: 0px;">
              <div class="demo-image__preview">
              <el-image
                  v-if="item.respath?item.respath:item.thumbpath"
                  style="width:100%; height: 100%"
                  :src="'file:///'+item.respath"
                  :preview-src-list="srcList">
              </el-image>
<span v-else-if="item.contant" style="width:300px;word-break: break-word; white-space: normal;"> 
  {{ item.contant }}
</span>
              
               <el-image
                  v-else
                  style="width:100%; height: 100%"
                  :src="formateImg(item)"
                  :preview-src-list="srcList">
              </el-image>
              </div>
            <div v-if="showBiaoJi">
              <div class="badgeBox" style="float:right;" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                <el-button class="orderBtn" :title="$t('wechat.biaojitishi')" v-else @click="markOrder(item)" type="text" size="mini" style="float:right;color: #000;margin-right:10px" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
          </div>
        </div>
        </div>
        <!-- right  图片 -->
        <div v-else-if="item.msgtype==-2000" class="chat-receiver" style="margin-bottom:.2rem;margin-top:10px;">
          <div style="position:relative;">
            <img :src="'http://q2.qlogo.cn/headimg_dl?dst_uin='+item.sendername+'&spec=100'" />
            <div v-if="startPrint" style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button @click="handleClickPrint(item,$event)" size="small" type="text" >添加</el-button></div>
          </div>
          <div><span><span v-if='item.sendernick'>{{item.sendernick}}</span><span v-else>{{item.sendername}}</span></span> <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span> <span style="color:red;" v-if="item.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
          <div style="text-indent: 0px;">
              <div class="demo-image__preview">
                <el-image
                      style="width:100%; height: 100%"
                      :src="item.respath"
                      :preview-src-list="srcList">
                  </el-image>
              </div>
            <div v-if="showBiaoJi">
              <div class="badgeBox" style="float:right;" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                <el-button class="orderBtn" :title="$t('wechat.biaojitishi')" v-else @click="markOrder(item)" type="text" size="mini" style="float:right;color: #000;margin-right:10px" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
          </div>
        </div>
        </div>
                <!-- right  转发的聊天记录7 -->
        <div v-else-if="item.msgtype==7" class="chat-receiver" style="margin-bottom:.2rem;margin-top:10px;">
          <div style="position:relative;">
            <img :src="'http://q2.qlogo.cn/headimg_dl?dst_uin='+item.sendername+'&spec=100'" />
            <div v-if="startPrint" style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button @click="handleClickPrint(item,$event)" size="small" type="text" >添加</el-button></div>
          </div>
          <div><span><span v-if='item.sendernick'>{{item.sendernick}}</span><span v-else>{{item.sendername}}</span></span> <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span> <span style="color:red;" v-if="item.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
          <div style="text-indent: 0px;">
             <div @click="open7(item)" style="background:#fff;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);cursor: pointer;padding-bottom:2px;" >
                <div style="text-algin:left;width:100%;margin-left:12px;font-size:12px;color:#b3b2b2;">
                <p>{{item.title}}</p>
                <p style="padding-left:10px;" >点击查看转发聊天记录</p>
                </div>
                <p style="padding-left:10px;" class="bottomName">聊天记录</p>
          <div v-if="showBiaoJi">
                <div class="badgeBox" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                  <el-button class="orderBtn" :title="$t('wechat.biaojitishi')" v-else @click="markOrder(item)" type="text" size="mini" style="float:right;color: #000;margin-right:10px" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
              </div>
            </div>
        </div>
        </div>
        <!-- Right --> <!-- 引用 -->
        <div v-else-if="item.msgtype==499 || item.msgtype==-499" class="chat-receiver" style="margin-bottom:.2rem;margin-top:10px;">
          <div style="position:relative;">
            <img :src="'http://q2.qlogo.cn/headimg_dl?dst_uin='+item.contactname+'&spec=100'" />
            <div v-if="startPrint" style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button @click="handleClickPrint(item,$event)" size="small" type="text" >添加</el-button></div>
          </div>
          <div><span><span v-if='item.sendernick'>{{item.sendernick}}</span><span v-else>{{item.sendername}}</span></span> <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span> <span style="color:red;" v-if="item.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
          <div>
            <div class="chat-right_triangle"></div>
            <span>{{item.contant}}</span>
            <div v-if="showBiaoJi">
            <div class="badgeBox" style="float:right;" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                <el-button class="orderBtn" :title="$t('wechat.biaojitishi')" v-else @click="markOrder(item)" type="text" size="mini" style="float:right;color: #000;margin-right:10px" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
          </div>
        </div>
        </div>
        <!-- Right --> <!-- 语音 -->
          <div v-else-if="item.msgtype==-2002" class="chat-receiver" style="margin-bottom:.2rem;margin-top:10px;">
            <div style="position:relative;">
              <img :src="'http://q2.qlogo.cn/headimg_dl?dst_uin='+item.sendername+'&spec=100'" />
              <div v-if="startPrint" style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button @click="handleClickPrint(item,$event)" size="small" type="text" >添加</el-button></div>
            </div>
            <div><span><span v-if='item.sendernick'>{{item.sendernick}}</span><span v-else>{{item.sendername}}</span></span> <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span> <span style="color:red;" v-if="item.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
            <div class="yuyin" @click="detailsAuideInfo(item)">
              <div class="chat-right _triangle"></div>
              <span><i class="iconfont icon-saying"></i> 语音气泡</span>
              <div v-if="showBiaoJi">
              <div class="badgeBox"  style="display: inline-block;float: right;margin: 0;" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                <el-button class="orderBtn" :title="$t('wechat.biaojitishi')" v-else @click.stop="markOrder(item)" type="text" size="mini" style="float:right;color: #000;margin-right:10px" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
            </div>
          </div>
          </div>
        <!-- Right --> <!-- 语音通话 -->
        <div v-else-if="item.msgtype==50" class="chat-receiver" style="margin-bottom:.2rem;margin-top:10px;">
            <div style="position:relative;">
              <img :src="'http://q2.qlogo.cn/headimg_dl?dst_uin='+item.sendername+'&spec=100'" />
              <div v-if="startPrint" style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button @click="handleClickPrint(item,$event)" size="small" type="text" >添加</el-button></div>
            </div>
            <div><span><span v-if='item.sendernick'>{{item.sendernick}}</span><span v-else>{{item.sendername}}</span></span> <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span> <span style="color:red;" v-if="item.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
            <div>
              <div class="chat-right_triangle"></div>
              <span>{{formateAudioCall(item).text}}<i style="margin-left:15px;font-weight:1000;" :class="formateAudioCall(item).icon"></i></span>
              <div v-if="showBiaoJi">
              <div class="badgeBox" style="float:right;" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                <el-button class="orderBtn" :title="$t('wechat.biaojitishi')" v-else @click="markOrder(item)" type="text" size="mini" style="float:right;color: #000;margin-right:10px" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
            </div>
          </div>

        </div>
        <!-- Right --> <!-- 名片 -->
        <div v-else-if="item.msgtype==42" class="chat-receiver" style="margin-bottom:.2rem;margin-top:10px;">
          <div style="position:relative;">
            <img :src="'http://q2.qlogo.cn/headimg_dl?dst_uin='+item.sendername+'&spec=100'" />
            <div v-if="startPrint" style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button @click="handleClickPrint(item,$event)" size="small" type="text" >添加</el-button></div>
          </div>
          <div><span><span v-if='item.sendernick'>{{item.sendernick}}</span><span v-else>{{item.sendername}}</span></span> <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span> <span style="color:red;" v-if="item.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
          <div style="background:#fff;text-indent: 0px;">
            <div class="nameCard" @click="viewsFriendCard(formateCard(item).msg)">
              <div class="contentNameCard">
                <img  height="" :src="formateCard(item).msg._bigheadimgurl" alt="">
                <div class="nameCardNameTExt">{{formateCard(item).msg._nickname}}</div>
              </div>
              <div class="nameSiren" style="text-algin:left ! important;">个人名片</div>
              <div v-if="showBiaoJi">
              <div class="badgeBox" style="float:right;" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                <el-button class="orderBtn" :title="$t('wechat.biaojitishi')" v-else @click.stop="markOrder(item)" type="text" size="mini" style="float:right;color: #000;margin-right:10px" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
            </div>
          </div>
          </div>
        </div>
        <!-- Left --> <!-- 转发聊天记录 -->
        <div v-else-if="item.msgtype==353 || item.msgtype==-19" class="chat-receiver" style="margin-bottom:.2rem;margin-top:10px;">
          <div style="position:relative;">
            <img :src="'http://q2.qlogo.cn/headimg_dl?dst_uin='+item.sendername+'&spec=100'" />
            <div v-if="startPrint" style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button @click="handleClickPrint(item,$event)" size="small" type="text" >添加</el-button></div>
          </div>
          <div><span><span v-if='item.sendernick'>{{item.sendernick}}</span><span v-else>{{item.sendername}}</span></span> <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span> <span style="color:red;" v-if="item.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
          <div style="background:#fff;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);cursor: pointer;padding-bottom:2px;" @click="viewsMessageFriendList(messageRemrd(item.contant))">
            <!-- <div class="chat-left_triangle"></div> -->
            <span class="titleMessageBoxBox" :title="messageRemrd(item.contant).desc">{{messageRemrd(item.contant).desc}}</span>
            <div style="text-algin:left;width:100%;margin-left:12px;font-size:12px;color:#b3b2b2;">
            <p>{{messageRemrd(item.contant).desc}}</p>
            <div v-if="showBiaoJi">
            <div class="badgeBox" style="float:right;" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                <el-button class="orderBtn" :title="$t('wechat.biaojitishi')" v-else @click="markOrder(item)" type="text" size="mini" style="float:right;color: #000;margin-right:10px" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
            </div>
          </div>
            <div class="bottomName">聊天记录</div>
          </div>
        </div>
        <!-- right --> <!-- 文件 -->
        <div v-else-if="item.msgtype==5 || item.msgtype==1090519089 || item.msgtype==-3008 || item.msgtype==-2005" class="chat-receiver" style="margin-bottom:.2rem;margin-top:10px;">
          <div style="position:relative;">
            <img :src="'http://q2.qlogo.cn/headimg_dl?dst_uin='+item.sendername+'&spec=100'" />
            <div v-if="startPrint" style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button @click="handleClickPrint(item,$event)" size="small" type="text" >添加</el-button></div>
          </div>
          <div><span><span v-if='item.sendernick'>{{item.sendernick}}</span><span v-else>{{item.sendername}}</span></span> <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span> <span style="color:red;" v-if="item.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
          
          <div v-if="item.respath" style="background:#fff;text-indent: 0px;">
            <div class="nameCard"  @click="downLoadFile(item.respath)">
              <div class="contentNameCard" style="position:relative;">
                <img  height="" src="../../../assets/images/weChatQQ/file.png" alt="">
                <div class="nameCardNameTExt">{{item.contant}}</div>
            <div v-if="showBiaoJi">
                <div class="badgeBox" style="position:absolute;right:-40px;top:-10px;" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                  <el-button class="orderBtn"  :title="$t('wechat.biaojitishi')" v-else @click.stop="markOrder(item)" type="text" size="mini" style="float:right;color: #000;margin-right:10px;position:absolute;right:-20px;top:-10px;" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
              </div>
            </div>
              <div class="nameSiren">点击打开文件</div>
            </div>
          </div>
            <div v-else style="background:#fff;text-indent: 0px;">
            <div class="nameCard">
              <div class="contentNameCard">
                <img  height="" src="../../../assets/images/weChatQQ/file.png" alt="">
            <div v-if="showBiaoJi">
                <div class="badgeBox" style="float:right;" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                <el-button class="orderBtn" :title="$t('wechat.biaojitishi')" v-else @click.stop="markOrder(item)" type="text" size="mini" style="float:right;color: #000;margin-right:10px" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
                <div class="nameCardNameTExt">暂无文件路径</div>
              </div>
            </div>
            </div>
          </div>
        </div>
        <!-- Right --> <!-- 位置 -->
        <div v-else-if="item.msgtype==48" class="chat-receiver" style="margin-bottom:.2rem;margin-top:10px;">
          <div style="position:relative;">
            <img :src="'http://q2.qlogo.cn/headimg_dl?dst_uin='+item.sendername+'&spec=100'" />
            <div v-if="startPrint" style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button @click="handleClickPrint(item,$event)" size="small" type="text" >添加</el-button></div>
          </div>
          <div><span><span v-if='item.sendernick'>{{item.sendernick}}</span><span v-else>{{item.sendername}}</span></span> <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span> <span style="color:red;" v-if="item.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
          <div style="text-indent: 0px;">
              <div class="map">
                <div class="mapTitle">
                      <div style="width: 100%;overflow:hidden;text-overflow:ellipsis;white-space: nowrap;">{{formdatePosition(item)._poiname}}</div>
                      <span style="display:block;color:#6e6e6ea6;width:230px;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space: nowrap;">{{formdatePosition(item)._label}}</span>
                  </div>
                  <p class="mapBox">
                      <position style="float:none;" v-if="formdatePosition(item)" :position="formdatePosition(item)"/>
                  </p>
            <div v-if="showBiaoJi">
                  <div class="badgeBox" style="float:right;" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                <el-button class="orderBtn" :title="$t('wechat.biaojitishi')" v-else @click="markOrder(item)" type="text" size="mini" style="float:right;color: #000;margin-right:10px" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
              </div>
            </div>
          </div>
        </div>
        <!-- Left --> <!-- 视频 -->
        <div v-else-if="item.msgtype==43 || item.msgtype==-2022 || item.msgtype==181 ||item.msgtype==4" class="chat-receiver" style="margin-bottom:.2rem;margin-top:10px;">
          <div style="position:relative;">
            <img :src="'http://q2.qlogo.cn/headimg_dl?dst_uin='+item.sendername+'&spec=100'" />
            <div v-if="startPrint" style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button @click="handleClickPrint(item,$event)" size="small" type="text" >添加</el-button></div>
          </div>
          <div><span><span v-if='item.sendernick'>{{item.sendernick}}</span><span v-else>{{item.sendername}}</span></span> <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span> <span style="color:red;" v-if="item.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
          <div style="text-indent: 0px;">
              <div class="demo-image__preview">
                <video  v-if="item.respath && !isJsonContent(item.contant)" width="100%" controls :src="item.respath"></video>
                <div v-else-if="isJsonContent(item.contant)" style="margin:0;width:200px">
                  <p style="font-size:12px">{{formatJsonContent(item.contant).prompt}}</p>
                  <div style="font-size:15px;color:#1890ff;cursor: pointer;" @click="openqqVideowebUrl(formatJsonContent(item.contant).meta.video.pcJumpUrl)">
                    查看看视频内容
                  </div>
                </div>
                <span v-else style="width:300px;word-break: break-word; white-space: normal;"> 
                  {{ item.contant }}
                </span>
              </div>
            <div v-if="showBiaoJi">
              <div class="badgeBox" style="float:right;" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                <el-button class="orderBtn" :title="$t('wechat.biaojitishi')" v-else @click="markOrder(item)" type="text" size="mini" style="float:right;color: #000;margin-right:10px" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
          </div>
        </div>
        </div>
        <!-- 无法解析单独显示 -->
        <div v-else class="chat-receiver" style="margin-bottom:.2rem;margin-top:10px;">
          <div style="position:relative;">
            <img :src="'http://q2.qlogo.cn/headimg_dl?dst_uin='+item.sendername+'&spec=100'" />
            <div v-if="startPrint" style="position: absolute;bottom:-40px;font-size:12px;color:#409EFF;cursor: pointer;"><el-button @click="handleClickPrint(item,$event)" size="small" type="text" >添加</el-button></div>
          </div>
          <div><span><span v-if='item.sendernick'>{{item.sendernick}}</span><span v-else>{{item.sendername}}</span></span> <span style="margin-left:.05rem;">{{formDate(item.msgtime)}}</span> <span style="color:red;" v-if="item.recovery==1"><i style="font-weight:1000;" class="el-icon-warning-outline"></i> {{$t('wechat.delmsg')}}</span></div>
          <div style="text-indent: 0px;">
          <div style="text-indent: 0px;position: relative;" >
            <div>
              <div class="chat-right_triangle"></div>
                <span> 该消息类型暂无法展示<i style="margin-left:15px;color:#faad14;" class="el-icon-warning"></i></span>
            <div v-if="showBiaoJi">
                <div class="badgeBox" style="float:right;" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
                <el-button class="orderBtn" :title="$t('wechat.biaojitishi')" v-else @click="markOrder(item)" type="text" size="mini" style="float:right;color: #000;margin-right:10px" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
              </div>
                <span class="viewsInfoDetailsMessages" style="position: relative;left:6%;" @click="viewsErroMessagesDetails(item)">查看详情</span>
            </div>
          </div>
          </div>
        </div>
</div>
      </div>

      <div class="loadingBoxbottom" v-if="showLoading" style="color:#2196f3"><i :class="loadClass" style="color:#2196f3"></i> {{ loadingText }}</div>
      <a-affix :offset-bottom="50">
        <el-button type="primary" style="" @click="getPrintJsonStr" v-if="startPrint">{{$t('wechat.startDaYin')}}</el-button>
        <el-button style="" @click="closePrintFunction" v-if="startPrint">{{$t('wechat.close')}}</el-button>
       </a-affix>
    </div>
    
    <div v-if="!showDetails">
      <div style="margin-left:10px;cursor: pointer;" @click="backChat"><i class="el-icon-arrow-left"></i> 返回</div>
      <div class="audioBoxList" >
      <div style="padding:30px 10px;">
        <audio v-if="IsMp3(audioData.respath)" style="width:100%;" controls :src="audioData.respath"></audio>
        <audio v-if="!IsMp3(audioData.respath)" style="width:100%;" controls :src="codeSrc"></audio>
      </div>
      <h3 style="font-weight: bold;padding-left:10px;height:34px;border-bottom:1px solid #e7e7e7;line-height: 34px;margin-bottom:5px;">音频信息:</h3>
        <div style="padding-left:10px;min-height:40px;line-height: 40px;border-bottom: 1px solid #efe9e9;" ><i class="el-icon-warning-outline"></i> 若音频不能播放，请点击转码后播放！ <el-link type="primary" style="float: right;margin-right:20px;" @click="codeFormate(audioData)"><i v-if="showTime" class="el-icon-loading"></i> {{$t('wechat.playzhuanma')}}</el-link></div>
        <div style="padding-left:10px;min-height:40px;line-height: 40px;border-bottom: 1px solid #efe9e9;"><i class="el-icon-folder"></i> 发送人：{{ audioData.sendername}}</div>
        <div style="padding-left:10px;min-height:40px;line-height: 40px;border-bottom: 1px solid #efe9e9;"><i class="el-icon-files"></i> 时间：{{formDate(audioData.msgtime)}}</div>
        <div style="padding-left:10px;min-height:40px;line-height: 40px;border-bottom: 1px solid #efe9e9;"><i class="el-icon-lock"></i> MD5：{{ audioData.filemd5 }}</div>
        <div style="padding-left:10px;min-height:40px;line-height: 40px;border-bottom: 1px solid #efe9e9;word-break: break-all;"><i class="el-icon-guide"></i> {{$t('wechat.imgPath')}}:{{ audioData.respath }}</div>
    </div>
    </div>

    </div>

    <!-- 查看语音包Message详情 -->
    <a-modal
      title="语音详情"
      :getContainer="getRefsAff"
      :maskClosable="false"
      :footer="null"
      width="72%"
      :visible="visibleAudio"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
    <div class="audioBox">
      <div class="pathBox">
        <div class="itemAudio bottomBorder" style="border-top-right-radius: 5px;">
          <audio ref="audioDom" :src="codeSrc" controls></audio>
          时间：{{formDate(audioData.msgtime)}}
          <el-button size="small" style="margin-left:20px;" @click="playAudioFile(audioData.respath)" v-html="html"></el-button>
        </div>
        <div class="itemAudio" style="border-bottom-right-radius: 5px;">
          <i class="el-icon-document-copy copy" @click.stop="copyAddress(audioData.respath)" title="复制" style="margin-right:10px;"></i>本地路径：{{audioData.respath}}
        </div>
      </div>
    </div>
    </a-modal>
    <!-- 查看转发聊天记录详情 -->
     <a-modal
      :maskClosable="false"
      :getContainer="getRefsAff"

      :footer="null"
      :title="MessageFriendTitle"
      :width="500"
      :visible="MessageFriendContentVisible"
      @ok="handleOkMessageFriend"
      @cancel="handleCancelMessageFriend"
    >
    <div>
      <div style="margin-bottom:10px;">简述：{{zhuanfaTitle}}</div>
      <div class="listBox">
      <div class="chatRecord" v-for="(item,index) in messageRDataList" :key="index">
        <div class="friendAvatar">
          <img  style="width:70%;height:70%;" src="../../../assets/images/weChatQQ/chartImg.png" alt="">
        </div>
        <div>
        
        </div>
        <div class="" style="background:#efeeee;padding:10px;border-radius:10px;" v-if="(item.msg instanceof Array)">
          <p style="">{{item.sourcename}} 转发聊天记录</p>
          <div style="width:350px;border-bottom:1px solid#fff;padding-top:15px;" v-for="(i,j) in item.msg" :key="j">
          <div v-if="(i.msg instanceof Array)">
            <p style="margin-bottom:10px;">{{i.sourcename}} 转发聊天记录中的转发聊天记录</p>
              <div v-for="(x,y) in i.msg" :key="y">
                <div style="padding-left:20px;">
                  <p>{{x.sourcename}}：{{x.msg}}</p>
                  <p style="margin-bottom:15px;">{{x.time}}</p>
                </div>
              </div>
          </div>
            <div v-else style="padding-left:20px;">
              <p>{{i.sourcename}}：{{i.msg}}</p>
              <p style="margin-bottom:15px;">{{i.time}}</p>
            </div>
          </div>
        </div>
        <div class="chatRecordContent" v-else>
            <div class="chatRecordContentLeft">
              <div class="friendNames" style="font-size:13px;color:#898989d9;">{{item.sourcename}}</div>
              <div class="friendNames friendNamesContent" style="font-size:1000;" title="详情提示">{{item.msg}}</div>
            </div>
              <div class="chatRecordDate">{{item.time}}</div>
          </div>
      </div>
      </div>
    </div>

    </a-modal>
    <!-- 查看推荐好友名片 -->
    <a-modal
      v-model="modal2Visible"
      :getContainer="getRefsAff"
      :maskClosable="false"
      :footer="null"
      title="详情"
      centered
      @ok="() => (modal2Visible = false)"
    >
    <div class="cardContent">
      <img width="100px" height="100px" :src="card._bigheadimgurl" alt="">
      <div class="cardTextInfo" v-if="card">
        <p style="font-weight:1000;display:flex;align-items:center;font-size:20px;">{{card._nickname}}</p>
        <p v-if="card._fullpy">昵称:{{card._fullpy}}</p>
        <p v-if="card._fromnickname">昵称:{{card._fromnickname}}</p>
        <p v-if="card._content">备注:{{card._content}}</p>
        <p v-if="card._sex==1">性别:男</p>
        <p v-else-if="card._sex==2">性别:女</p>
        <p v-else>性别:未知</p>
        <p>地区:{{card._province}}-{{card._city}}</p>
        <p v-if="card._sharecardnickname">推荐人昵称：{{card._sharecardnickname}}</p>
        <p v-if="card._sharecardusername">推荐人微信号：{{card._sharecardusername}}</p>
      </div>
    </div>

    </a-modal>

    <!-- 无法解析消息类型详情 -->
      <a-modal
      v-model="erroMessageModel"
      :footer="null"
      width="300px"
      title="消息详情"
      :maskClosable="false"
      :getContainer="getRefsAff"
      centered
      @ok="() => (erroMessageModel = false)"
    >
    <div v-if="unKnowData">
      {{unKnowData.contant}}
    </div>
    </a-modal>

    <!-- 49类型合并转发 -->
      <a-modal
      v-model="hebingShow"
      :footer="null"
      :getContainer="getRefsAff"
      :maskClosable="false"
      title="合并转发"
      centered
      @ok="() => (hebingShow = false)"
    >
    <el-table
    :data="hebeingList"
    border
    style="width: 100%">
    <el-table-column
      prop="realchatname"
      label="发送者名称"
      >
    </el-table-column>
    <el-table-column
      prop="msg"
      label="消息内容"
      >
    </el-table-column>
    <el-table-column
      prop="time"
      label="时间">
    </el-table-column>
  </el-table>
    </a-modal>
      <a-modal width="300px" v-model="showRemark" :getContainer="getRefsAff"
        :maskClosable="false" title="提示" @ok="handleOk11">
        <p>{{$t('wechat.biaojibeizhu')}}</p>
        <p><el-input type="textarea" v-model="remark"></el-input></p>
      </a-modal>


    <!--打印窗口 -->
    <a-modal width="300px" v-model="showPrint" :getContainer="getRefsAff"
        :maskClosable="false" title="选择打印方式" @ok="printOk">
        <el-radio-group v-model="formResource">
          <el-radio label="打印所有已读" style="margin-bottom:10px;font-size:18px;"></el-radio>
          <el-radio label="手动添加已读打印" style="margin-bottom:10px;font-size:18px;"></el-radio>
          <el-radio :label="$t('wechat.selfsmsjietu')" style="margin-bottom:10px;font-size:18px;"></el-radio>
        </el-radio-group>
      </a-modal>

    <!--转发聊天记录7 -->
    <a-modal width="300px" v-model="zhuanfashow7" :getContainer="getRefsAff"
         :title="zhuanfa7.title" >
       <div v-if="zhuanfa7.multInfo && zhuanfa7.multInfo.length">
        <div v-for="(item, index) in zhuanfa7.multInfo" :key="index" class="chat-record">
          <!-- 头部信息：用户名 + 时间 -->
          <div class="chat-header">
            <span class="chat-name">{{ item.realchatname }}</span>
            <span class="chat-time">{{ formDate(item.time) }}</span>
          </div>
          <div class="chat-content">
            <!-- 文字消息 -->
            <template v-if="item.type === 1">
              <p v-if="!isJsonZhuanFa(item.msg)" class="text-message">{{ item.msg }}</p>
              <div v-else>
                <span>{{formatJsonContent(item.msg).prompt}}</span>
                <br>
                <div style="font-size:15px;color:#1890ff;cursor: pointer;" @click="openqqVideowebUrl(formatJsonContent(item.msg).meta.video.pcJumpUrl)">
                    查看看视频内容
                </div>
              </div>
            </template>

            <!-- 图片消息 -->
            <template v-else-if="item.type === 2">
              <img :src="'file:///'+item.respath" class="chat-image" />
            </template>

            <!-- 视频消息 --> 
            <template v-else-if="item.type === 4">
              <video :src="'file:///'+item.respath" controls class="chat-video"></video>
            </template>

            <!-- 分享的视频 -->
            <template v-else-if="item.type === 8">
              <div class="shared-video">
                <p>分享的视频：</p>
                <video :src="'file:///'+item.respath" controls class="chat-video"></video>
              </div>
            </template>

            <!-- 未知类型 -->
            <template v-else>
              <p class="unknown-message">[未知消息类型]</p>
            </template>
          </div>
        </div>
      </div>
      <div v-else class="empty-message">暂无聊天记录</div>
    </a-modal>
  </div>
</template>
<script>

import position from '../map/position.vue'
import { getWeChatFriendMessageList,searchFunction } from '@/api/weChat/weChat_api'
import { parseTime } from '@/utils/index'
import loadingTem from '../loading/index.vue'
import { getFormateCode } from '@/api/media/media_api'
import { openFilePosition } from '@/api/openFile/open_File'
import { sendMarkOrderApi } from '@/api/markApi/index'
import { throttle } from 'lodash';
import { write } from 'fs'
const x2js=require('x2js');
const x2jsone=new x2js(); //实例

import ScreenShort from "js-web-screen-shot";

export default {
  props:['chatWithObj','accountData',"recovery",'offsetLimit'],
  name: "qqMessage",
  components:{
      position,
      loadingTem,
  },
  data(){
      return{
        zhuanfashow7:false,
        zhuanfa7:'',
        stopAppendMessageData:false,
        storeArray:[],
        startPrint:false,
        printArray:[],
        formResource:'打印所有已读',
        remarkMessageTime:0,

        selectld:-1,
        selectType:0, //0下1上
        selectTime:-1,
        isExistsSelectID:0,

        showTime:false,
        showDetails:true,
        loadClass:'el-icon-loading',
        loadingText:'正在加载. . .',
        showLoading:false,

        loadClass2:'el-icon-refresh-left',
        loadingText2:'点击加载更多',
        showLoading2:false,

        showPrint:false,
        pageIndexValue:'',
        dynamicTags:[],
        showPageN:false,
        showBiaoJi:true,
        loading:null,

        showRemark:false,
        remark:'',
        id:'',
        hebeingList:[],
        hebingShow:false,
        zhuanfaTitle:'',
        codeSrc:'',
        html:'点击转码',
        audioData:'',
        showLoadingBox:false,
        size:'100px',
        card:'',
        messageRDataList:[],
        offset:1,
        limit:50,
        searchWord:'',
        form:{
          type:[],
          delivery:''
        },
        unKnowData:'',
        total:0,
        self:'',
        messageData:[],
        erroMessageModel:false,
        modal2Visible: false,
        MessageFriendContentVisible:false,
        MessageFriendTitle:'聊天记录',
        icon:'el-icon-video-play',
        visibleAudio:false,
        confirmLoading: false,
        url:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F512%2F0PQ2123I9%2F120PQ23I9-10-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1646980202&t=e8f5aecc7763071d76513929b701069d',
        srcList:[],
        scrollTop:0
      }
  },

  watch:{
    '$store.state.account.qqmessage':function(){
      if(this.offsetLimit.msg_offset){
        this.offset=this.offsetLimit.msg_offset
        this.selectld = this.offsetLimit.id;
        this.selectTime = this.offsetLimit.msgtime;
        this.isExistsSelectID = 1
        }else{
        this.offset=1
        this.total=0

        this.selectld=-1
        this.selectType=0//0下1上
        this.selectTime=-1
        this.isExistsSelectID=0
        this.loadClass2='el-icon-refresh-left'
        this.loadingText2='点击加载更多'
        }
      this.searchWord = ''
      this.onSearch()
      this.messageData = []
    }
  },
  created(){
        // if(this.offsetLimit.msg_offset){
        //     this.offset=this.offsetLimit.msg_offset;
        //     this.selectld = this.offsetLimit.id;
        //     this.selectTime = this.offsetLimit.msgtime;
        //     this.isExistsSelectID = 1
        //   }else{
        //     this.offset=1
        //     this.total=0
        //   }
        // this.onSearch();
        this.selectld=-1;
        this.selectType=0; //0下1上
        this.selectTime=-1;
        this.isExistsSelectID=0;

        this.searchWord = ''
      this.onSearch()
      this.messageData = []
  },
  methods:{
    openqqVideowebUrl(url){
      window.open(url,"_blank")
    },
    isJsonContent(content) {
      // console.log(typeof content === 'string' && content.includes("app") && content.includes("meta"))
      return typeof content === 'string' && content.includes("app") && content.includes("meta");
    },
    isJsonZhuanFa(content) {
      // console.log(typeof content === 'string' && content.includes("app") && content.includes("prompt"))
      return typeof content === 'string' && content.includes("app") && content.includes("prompt");
    },
// 格式化JSON内容
  formatJsonContent(content) {
    try {
      const parsedJSON = JSON.parse(content);
      console.log("+++++++++++++",parsedJSON)

      return parsedJSON;
    } catch (error) {
      console.error('解析JSON时出错:', error);
      return content; // 如果解析失败，返回原始内容
    }
  },
    handleClickPrint(item,event){
      if(event.srcElement.innerHTML == '添加'){
        event.srcElement.innerHTML = '√已添加';
        event.srcElement.style.color = 'red';
        event.srcElement.style.fontWeight = '1000';
        this.printArray.push(item);
      }else{
        event.srcElement.innerHTML = '添加';
        event.srcElement.style.color = '#409EFF';
        event.srcElement.style.fontWeight = '500';
        const index = this.printArray.indexOf(item);
        if (index !== -1) {
          this.printArray.splice(index, 1);
        }
      }
    },
    closePrintFunction(){
      this.stopAppendMessageData = true;
      this.storeArray = [];
      this.showBiaoJi = false;
      this.stopAppendMessageData = false;
      this.startPrint = false;
    },
    open_2000Img(url){
      window.open(url,'_blank');
    },
    clearMessage(){
      this.messageData = [];
        this.selectld=-1;
        this.selectType=0; //0下1上
        this.selectTime=-1;
        this.isExistsSelectID=0
    },
    backChat(){
      this.showDetails = true;
      this.audioData = '';
      this.codeSrc = '';
    },
    codeFormate(url){
      this.showTime = true;
      let suffix = /\.([0-9a-zA-Z]+)$/i.exec(url.respath)[1]
      if(suffix!=='mp3'){
        let data={
          mediaPath:url,
          mediaType:1
        }
        getFormateCode(data).then(res=>{
          this.showTime = false;
          // this.showLoadingBox=false
          this.codeSrc=res.data[0].direction;

        }).catch(err=>{
          // this.showLoadingBox=false
        })
      }else{
        this.showTime = false;
        // this.html=`无需转码<i class="el-icon-check"/>`
        this.codeSrc=url
      }
    },
    IsMp3(path){
    let extension = path.split('.').pop();
    extension.toLowerCase();
    if(extension.toLowerCase()=='mp3'){
      return true;
    }else{
      return false;
    }
    },
    loadMoreData(){
          const list = this.$refs.messageRef;
    
          this.loadClass2 = 'el-icon-loading';
          this.loadingText2 = '正在加载. . .';
          let len = this.messageData.length;
          this.selectld = this.messageData[0].id;
          this.selectTime = this.messageData[0].msgtime;
          this.selectType = 1;
          // if(this.messageData.length>=100){
            //   this.messageData.splice(100,this.messageData.length-1)
          // }
          this.scrollTop = list.scrollTop;
          this.onSearchShift();
    },
    throttleFn: throttle(function() {
      if(this.stopAppendMessageData)return;

      // 获取列表元素
      const list = this.$refs.messageRef;
      if(list.scrollTop==0 && list.scrollHeight==0)return;

      
      // 判断滚动到底部
      if (list.scrollTop + list.clientHeight+10+10 >= list.scrollHeight) {

        // if(this.messageData.length>200){
        //   this.messageData.splice(0, 100);
        // }
        
        this.showLoading=true;
        if(this.messageData.length<this.total){
          this.scrollTop = list.scrollTop;
          this.loadClass = 'el-icon-loading';
          this.loadingText = '正在加载. . .';
          let len = this.messageData.length;
          this.selectld = this.messageData[len-1].id;
          this.selectTime = this.messageData[len-1].msgtime;
          this.selectType = 0;
          // this.$refs.messageRef.scrollTop = 10;
          this.onSearch();
        }
        else{

        }
      }

    },1000),
    setPageNumber(index){
      let data = {
        show:false,
        str:''
      }
      if(index+1<this.limit){
        let str = '第'+this.dynamicTags[0]+'页'
        data ={
          show:true,
          str:str
        }
        return data;
      }else if((index+1)%this.limit == 0){
        let str = '第'+this.dynamicTags[(index+1)/this.limit - 1]+'页'
        data ={
          show:true,
          str:str
        }
        return data;

      }else if((index+1)%this.limit !== 0){
        let str = '第'+this.dynamicTags[Math.ceil((index+1)/this.limit) - 1]+'页'
        data ={
          show:true,
          str:str
        }
        return data;
      }
    },
    open7(item) {
      if(item.contant.includes("multInfo")) {
        this.zhuanfa7 = JSON.parse(item.contant); // 解析 JSON
          this.zhuanfashow7 = true;
          return;
      }
      console.log("原始数据:", item.contant);
      try {
        // 去除 BOM 及无效字符
        let contentStr = this.extractAndFormatJSON(item.contant);

        console.log("清理后的字符串:", contentStr);

        if (contentStr == '未找到 JSON' || contentStr == "JSON 解析错误: ") {
          console.error("未找到有效的 JSON 数据");
        } else {
          this.zhuanfa7 = contentStr; // 解析 JSON
          this.zhuanfashow7 = true;
          console.log("解析成功的 JSON:", this.zhuanfa7);
        }
      } catch (error) {
        console.error("JSON 解析失败:", error);
      }
    },
extractAndFormatJSON(str) {
    try {
        // 使用正则表达式匹配 JSON
        const jsonMatch = str.match(/\{.*\}/s);
        if (jsonMatch) {
            const jsonStr = jsonMatch[0];
            const jsonData = JSON.parse(jsonStr); // 解析 JSON
            return JSON.stringify(jsonData, null, 4); // 格式化输出
        } else {
            return "未找到 JSON";
        }
    } catch (error) {
        return "JSON 解析错误: " + error.message;
    }
},
    addPageNumber(){
      if(this.pageIndexValue == '')return;

      for (let index = 0; index < this.pageIndexValue; index++) {
        const element = index+1;
        this.dynamicTags.push(element);
      }
      let that = this;
      that.loading = this.$loading({
          lock: true,
          text: '努力加载中请稍后...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
      setTimeout(()=>{
        that.printJson();
      },2000)
    },
    closeTags(tag){
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },
    openPrintModel(){
      this.dynamicTags = [];
      this.showPrint = true;
    },
    printOk(){
      this.showPrint = false;
      if(this.formResource == '手动添加已读打印'){
        this.scrollTop = this.$refs.messageRef.scrollTop;
        this.startPrint = true;
        this.printArray = [];
        return
      }else if(this.formResource == '对当前可视区域截图'){
        this.startPrint = false;
        new ScreenShort({
        enableWebRtc: true, // 是否启用webrtc，值为false则使用html2canvas来截图
        loadCrossImg: true, // 跨域
        level: 999999999999999, // 层级
        // dpi: currentScale, // 设置 DPI
        // clickCutFullScreen:false,
        // wrcWindowMode:true
        
      });
      }else{
        this.startPrint = false;
        setTimeout(()=>{
          this.printJson();
        },2000)
      }
    },
    async printJson() {
      this.showPrint = false;
      //通过getdata调用后台接口获取数据封装到res
      const res = await this.getPrintJsonStr();

      return
    },    
    getPrintJsonStr(){
      this.stopAppendMessageData = true;
      this.storeArray = [];
      this.storeArray = this.messageData;
      this.showBiaoJi = false;

      // this.dynamicTags = []
      // let list = []
      // this.messageData = []
      // for (let index = 0; index < this.dynamicTags.length; index++) {
      //   const element = this.dynamicTags[index];

      //   let data={
      //     proof_num:this.chatWithObj.proof_num,
      //     account_id:this.chatWithObj.account_id,
      //     contactid:this.chatWithObj.username,
      //     model:'wechat',
      //     recovery:this.recovery,
      //     searchkey:this.searchWord,
      //     offset:Number(element),
      //     limit:this.limit
      //   }
      //   searchFunction(data,'/search/tencent/content').then(res=>{
      //         let item = {
      //           pageIndex:element,
      //           list:res.data
      //         }
      //         list.push(item);
      //   })
      // }

      // let that = this;
      // setTimeout(()=>{
      //         for (let j = 0; j < list.length; j++) {
      //           for (let i = 0; i < list[j].list.length; i++) {
      //             const d = list[j].list[i];
      //             this.messageData.push(d)
      //         }
      //     }
      // },1000*this.dynamicTags.length);

        switch (this.formResource) {
          case '打印所有已读':
            break;
          case '手动添加已读打印':
          this.startPrint = false;
          this.messageData = [];

          this.messageData = this.printArray;
          this.messageData = this.messageData.sort((a, b) => parseInt(b.msgtime) - parseInt(a.msgtime));
            break;
          case '对当前可视区域截图':
            
            break;
        
          default:
            break;
        }

        let that = this;
        let width = that.$refs.messageRef.style.width;
      setTimeout(()=>{
              let dom =that.$refs.messageRef
              that.$refs.messageRef.style.width = 700+'px';

                dom.style['box-shadow']="none"
                dom.style['overflow-y']="visible"
              let focuser = setInterval(() => window.dispatchEvent(new Event('focus')), 500);

                printJS({
                  printable: 'ddddqq',
                    documentTitle:'  数据报告-打印',
                    type: 'html',
                    targetStyles: ['*'],
                    ignoreElements:['no-print','bc','gb'],
                    onPrintDialogClose: () => {//取消打印回调
                    clearInterval(focuser);
                    dom.style.height="85vh"
                    dom.style['overflow-y']="auto"
                    that.showBiaoJi = true;
                    that.messageData = that.storeArray;
                    that.stopAppendMessageData = false;
                    that.$refs.messageRef.scrollTop = that.scrollTop;
                    that.$refs.messageRef.style.width = width
                }
        })
      },1000)
    },



    initQunshoukuan(content){
      try {
        let str=content.split('<msg>')[1].split('</msg>')[0];
        let xmlDo=x2jsone.xml2js(str);
        return xmlDo;
      } catch (error) {
      }
    },
    initFaPiao(content){
      let xmlDo=x2jsone.xml2js(content);
    },
    positionGongXiang(content){
      let xmlDo=x2jsone.xml2js(content);
      return xmlDo;
    },
    qunChatList(content){
      let xmlDo=x2jsone.xml2js(content);
      return xmlDo;
    },
    openMusic(url){
      window.open(url)
    },
      initFormateMusic(content){
       let xmlDo=x2jsone.xml2js(content);
       return xmlDo
      },
        StringQunLiao(str){
            try {
              return JSON.parse(str);
            } catch (error) {
              let data=[
                    {
                        "direction": 2,
                        "fromuser": "",
                        "msg": "",
                        "realchatname": "happy_xiaolin",
                        "sourcename": "暂无",
                        "time": "2022-09-06 15:44:38",
                        "touser": "",
                        "type": 1
                    },
              ]
              return data;
            }
        },
        handleOk11(){
        let data={
        msgtime:this.remarkMessageTime,
        navigation_list:sessionStorage.getItem('arr').split(','),
        model:"qq",
        isChat:1,
        username:this.accountData.username,
        contact_username:this.chatWithObj.username,
        app_name:'好友',
        recovery:this.recovery,
        account_id:this.chatWithObj.account_id,
        proof_num:this.chatWithObj.proof_num,
        list_offset:this.offsetLimit.offset,
        list_limit:this.offsetLimit.limit,
        remark:this.remark,
        class:'',
        label:this.offsetLimit.label,
        msg_offset:this.offset,
        id:Number(this.id)
      }
      sendMarkOrderApi(data).then(res=>{
        this.showRemark=false;
        this.$message({
          message: '标记数据成功！',
          type: 'success'
        });
        this.messageData = [];
        this.onSearch()
      })
    },
    // 添加标记点
    markOrder(item){
      this.id=item.id;
      this.remarkMessageTime = item.msgtime;
      this.showRemark=true;
    },
  addWxFriendfMsg(item){
      let xml=item.contant;
       let xmlDo=x2jsone.xml2js(xml);
        try{
          return xmlDo.msg
        }catch(err){
          return '无法解析的添加好友消息类型！'
        }
    },
  // 查看49类型合并转发
  viewsDetailsInfo(list){
    this.hebeingList=list
    this.hebingShow=true
  },
  initStr(str){
    let data=JSON.parse(str)
    return data
  },
  indexOfFunction(str){
    return str.indexOf('<msg>')
  },
  copyAddress(valueData) {
	let oInput = document.createElement("input");
	//这边为链接地址this.liveLink='www.baidu.com'
	oInput.value = valueData;
	document.body.appendChild(oInput);
	oInput.select();
	document.execCommand("Copy");
	oInput.remove();
	this.$message({
		message: "复制成功",
		type: "success",
	});
},
    getRefsAff(){
      return  this.$parent.domFunction()
    },
    onSearchStart(){
      this.offset=1
      this.onSearch()
    },
    formateYinyongMessage(item){
      let data=JSON.parse(item)
    },
    // 格式化转发聊天记录
    messageRemrd(item){
      try {
        let reg = /\\/g;
        let str=item.replace(reg,'');
        return JSON.parse(str)
      } catch (error) {
        let data={
          desc:'未知错误'
        }
        return data
      }
    },
    // 下载文件
    downLoadFile(path){
      let data={
        filePath:path
      }
      openFilePosition(data).then(res=>{

      })
    },
    formateQQSystemOther(item){
      return JSON.parse(item)
        // let xml=item,
        // xmlDo=x2jsone.xml2js(xml);
        // return xmlDo
    },
        // qq小程序
        qqSystemOther(item){
      return JSON.parse(item)
    },
    // 系统消息提示
    formateQQSystem(item){
    let xml=item.contant,
    xmlDo=x2jsone.xml2js(xml);
    return xmlDo
    },
    // 格式化位置信息
    formdatePosition(item){
      let xml=item.contant,
        xmlDo=x2jsone.xml2js(xml);
        try{
          return xmlDo.msg.location
        }catch(err){

        }
    },
    // 格式化名片分享
    formateCard(item){
        let xml=item.contant,
        xmlDo=x2jsone.xml2js(xml);
        return xmlDo
    },
    //格式化语音通话
    formateAudioCall(item){
        try{
        if(item.contant.indexOf('recvtime')>0 && item.contant.split('<invitetype>')[1].split("</invitetype>")[0]==0){
          let data={
            text:'视频通话-时长'+ item.contant.split('<duration>')[1].split("</duration>")[0]+'秒',
            icon:'el-icon-video-camera'
          }
          return data
        }else{
          let data={
            text:'语音通话-时长'+ item.contant.split('<duration>')[1].split("</duration>")[0]+'秒',
            icon:'el-icon-phone-outline'
          }
          return data
        }
        }catch(err){
          let data={
            text:'未知的语音或视频通话',
            icon:'el-icon-question'
          }
          return data
        }
    },
    // 格式化红包
    formateHongBao(item){
        let xml=item.contant,
        xmlDo=x2jsone.xml2js(xml);
        return xmlDo
    },
    formateHongBao111(item){
      try{
        let xml=item.contant;
            xmlDo=x2jsone.xml2js(xml);
            return xmlDo
        }catch(err){
          let data={
            msg:{
              appmsg:{
                type:5,
                title:'暂无',
                url:''
              }
            }
          }
          return data
        }
    },
    // 收红包
    formateHongBaoSystem(item){
      if(item.contant.indexOf('img')==-1){
        return item.contant
      }else{
        return item.contant.replace(/[^\u4e00-\u9fa5]/gi,"")
      }
    },
    // 格式化图片路径
    formateImg(item){
        let xml=item.contant
        if(xml.indexOf('<msg>')!==-1){

          try{
           let emoji = xml.split('<msg>')[1].split('</msg>')[0];
            let xmlDo=x2jsone.xml2js(emoji)

            let str=xmlDo.emoji._cdnurl;
            var reg = new RegExp('&amp;','g');
            var test = str.replace(reg,'&');
            let emojiUrl=test.replace('*#*',':')
            return emojiUrl
          }catch(err){
            // return
          }
        }else{
          let url=require('../../../assets/null.png')
          return url;
        }
    },
    formDate(date){
      return parseTime(date)
    },
    onSearchShift(){
      // this.messageData.splice(0,this.messageData.length)

      // this.messageData=[];
      // this.self=this.accountData.avatar?this.accountData.avatar:'';
      let data='';

        data={
          proof_num:this.chatWithObj.proof_num,
          account_id:this.chatWithObj.account_id,
          contactid:this.chatWithObj.username,
          model:'wechat',
          recovery:this.recovery,
          searchkey:this.searchWord,
          offset:this.offset,
          limit:this.limit,
          selectId:this.selectld,
          selectType:this.selectType, //0下1上
          selectTime:this.selectTime,
          isExistsSelectID:this.isExistsSelectID
      }
      const scrollTop = this.$refs.messageRef.scrollHeight;

      searchFunction(data,'/search/tencent/content_new').then(res=>{
        try{
          if(res.data.length == 0){
            this.loadClass2 = 'el-icon-warning-outline';
            this.loadingText2 = '没有更多了！';
            return;
          }else{
            let aff = res.data.reverse()
        
        for (let index = 0; index < aff.length; index++) {
          const element = aff[index];
          
          this.messageData.unshift(element)
        }
        // this.$refs.messageRef.scrollTop = this.scrollTop;
        this.$nextTick(() => {
            // 获取添加元素的高度
            // const newHeight = this.$refs.messageRef.firstElementChild.offsetHeight;
            const newHeight = this.$refs.messageRef.scrollHeight;

            // // 计算需要滚动的距离
            // const scrollDistance = newHeight;

            // 设置列表的滚动高度
            this.$refs.messageRef.scrollTop = newHeight - scrollTop;
        });
        this.showLoading2=false;
          this.loadClass2 = 'el-icon-refresh-left';
          this.loadingText2 = '点击加载更多';

        // this.messageData=res.data;
        this.total=res.data[0].cnt;
          }
        }catch{
        this.messageData=[]
        // this.total=0
        }
      })
    },
    // 搜索聊天内容
    onSearch(ss){
      // this.messageData.splice(0,this.messageData.length)
      if(ss){
        this.searchWord = ss;
        this.messageData = []
      }

      // this.messageData=[];
      // this.self=this.accountData.avatar?this.accountData.avatar:'';
      let data='';

        data={
          proof_num:this.chatWithObj.proof_num,
          account_id:this.chatWithObj.account_id,
          contactid:this.chatWithObj.username,
          model:'qq',
          recovery:this.recovery,
          searchkey:this.searchWord,
          limit:this.limit,
          selectId:this.selectld,
          selectType:this.selectType, //0下1上
          selectTime:this.selectTime,
          isExistsSelectID:this.isExistsSelectID
      }
      
      searchFunction(data,'/search/tencent/content_new').then(res=>{
        try{
          if(res.data.length == 0){
            this.loadClass = 'el-icon-success';
            this.loadingText = '到底了，没有更多了！';
            return
          }
        let arr = res.data;
        
        for (let index = 0; index < arr.length; index++) {
          const element = res.data[index];
          this.messageData.push(element)
        }
        this.$refs.messageRef.scrollTop = this.scrollTop;
      
        // const a = document.getElementById('item-' + this.selectld);
        // a.scrollIntoView();
        // this.messageData=res.data;
        this.total=res.data[0].cnt;
        res.data.forEach(element => {
          this.srcList.push(element.respath)
        });

        }catch{
        this.messageData=[]
        // this.total=0
        }
      })
    },

      // 搜索聊天内容
      flayRemark(item){
      this.messageData=[];
      // this.self=this.accountData.avatar;
      let data='';

        data={
          proof_num:this.chatWithObj.proof_num,
          account_id:this.chatWithObj.account_id,
          contactid:this.chatWithObj.username,
          model:'wechat',
          recovery:this.recovery,
          searchkey:this.searchWord,
          // offset:this.offset,
          limit:this.limit,
          selectld:item.id,
          selectType:this.selectType, //0下1上
          selectTime:item.msgtime,
          isExistsSelectID:1
      }
      
      searchFunction(data,'/search/tencent/content_new').then(res=>{
        try{
        let arr = res.data;
        
        for (let index = 0; index < arr.length; index++) {
          const element = res.data[index];
          this.messageData.push(element)
        }
        this.$refs.messageRef.scrollTop = this.scrollTop;
      
        this.total=res.data[0].cnt;
        res.data.forEach(element => {
          this.srcList.push(element.respath)
        });

        }catch{
        this.messageData=[]
        }
      })
    },
    // 查看无法解析的消息类型详情
    viewsErroMessagesDetails(item){
      this.unKnowData=item
      this.erroMessageModel=true
    },
    // 查看名片
    viewsFriendCard(data){
      this.card=data
      this.modal2Visible=true
    },
    // 查看分享聊天记录
    viewsMessageFriendList(item){
      this.zhuanfaTitle=item.desc
      this.messageRDataList=item.msg
      this.MessageFriendContentVisible=true
    },
    // 播放语音
    playAudioFile(url){
      this.html=`正在转码请稍后...<i class="el-icon-loading"/>`
      let data={
        mediaPath:url,
        mediaType:1
      }
      getFormateCode(data).then(res=>{
      this.html=`转码完成<i class="el-icon-check"/>`
        // this.showLoadingBox=false
        this.codeSrc=res.data[0].direction
      }).catch(err=>{
        // this.showLoadingBox=false
      })
    },
    detailsAuideInfo(item){
      this.showDetails = false;

      // this.html="点击转码"
      this.audioData=item
      this.codeSrc=''
      // this.visibleAudio=true
    },
    handleOk(e) {
      this.ModalText = 'The modal will be closed after two seconds';
      this.confirmLoading = true;
      setTimeout(() => {
        this.visibleAudio = false;
        this.confirmLoading = false;
      }, 500);
    },
    handleCancel(e) { 
      this.visibleAudio = false;
    },
    handleOkMessageFriend(){
      this.MessageFriendContentVisible = false;
    },
    handleCancelMessageFriend(){
      this.MessageFriendContentVisible = false;
    },
    // 聊天内容分页
    handleSizeChange(val) {
        this.limit=val;
    },
    handleCurrentChange(val) {
      this.offset=val
      this.onSearch()
    },
  }
};
</script>

<style >
.el-icon-circle-close{
    color: #Fff;
}
</style>

<style scoped>
.chat-record {
  padding: 10px;
  border-bottom: 1px solid #eee;
}
.chat-header {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #666;
}
.chat-name {
  font-weight: bold;
}
.chat-content {
  margin-top: 8px;
}
.text-message {
  padding: 8px;
  background: #f5f5f5;
  border-radius: 5px;
}
.chat-image {
  width: 250px;
  max-height: 250px;
  border-radius: 5px;
}
.chat-video {
  width: 250px;
  max-height: 250px;
  border-radius: 5px;
}
.shared-video {
  padding: 10px;
  background: #eef5ff;
  border-radius: 5px;
}
.unknown-message {
  color: red;
  font-style: italic;
}
.empty-message {
  text-align: center;
  color: #999;
  font-size: 14px;
}
.loadingBoxbottom{
  text-align: center;
  width: 100%;
  float: left;
}
  .QunShouk{
    background: #02c479;
    width: 200px;
    height: 80px;
    color: #fff;
    display: flex;
    padding: 10px;
    border-radius: 5px;
  }
.qunItemBox{
  /* height: 30px !important; */
  /* line-height: 30px !important; */
  padding-left:20px;
  margin-bottom: 10px;
}
.badgeBox{
  width: 50px;
  height: 23px;
  border-radius: 10px;
  color: #fff !important;
  background: #f56c6c !important;
  text-align: center !important;
  float: right;
  line-height: 23px !important;
  padding: 0 !important;
  padding-left: 10px !important;
  position: relative;
  font-size: 12px;
  z-index:10;
  /* top: -10px;
  right: -10px; */
}

.classBoxBest{
  width: 100px;
  height: 100px;
}
.biaozhuimg{
  width: 40px;
  height: 40px;
}
.copy{
  font-size: 20px;
  cursor: pointer;
}
.copy:hover{
  color: #409eff;
}
.loadingBox{
  position: relative;
  top: 40px;
  z-index: 100;
  text-align: center;
  line-height: 100px;
}
#systemTips{
  text-align: center;
  margin-bottom:10px !important;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  color: rgb(146, 146, 146);
  font-size: 12px;
}
.nameCardNameTExt{
  margin-left: 20px;
}
.viewsInfoDetailsMessages{
  position: relative;
  right: -70px;
  top: 0px;
  font-size: 13px;
  font-weight: none;
  text-decoration:underline;
  color: #409eff;
  cursor: pointer;
}
.viewsInfoDetailsMessages:hover{
  color: #0616f5;
}
.cardContent{
  height: 100px;
  display: flex;

}
.cardTextInfo{
  padding-left: 20px;
}
.cardTextInfo>p{
  margin-bottom: 3px;
  font-size: 14px;
}
.grefTitleSpan{
  display: block;
  width: 170px;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.hrefBox{
  width: 250px;
  height:47px;
  display: flex;
  align-items: center;
}
.hrefBox>div{
  height: 50px;
}
.hrefBoxLeftBox{
  width: 180px;
}

.hrefBoxrightBox{
  width: 40px;
  margin: 0 !important;
}
.hrefBoxContentDeatils{
  width: 170px;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.textInfo{
  float: left;
  width: 230px;
  margin: 0 !important;
  border-top: 1px solid #ccc;
  padding-top: 2px !important;
}
.block{
  text-align: center;
  width: 100%;
  display: flex;
  align-items: center;
}
.listBox{
  display: block;
  min-height: 700px;
  overflow-y: auto;
  margin: 0 !important;
}
.chatRecordDate{
  width: 100px;
  height: 60px;
  line-height: 60px;
  font-size: 12px;
}
.chatRecordContentLeft{
  height: 60px;
  width: 290px;
  padding-left: 20px;
}
.friendNamesContent{
    overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.friendNames{
  height: 30px;
  line-height: 30px;
}
.chatRecordContent{
  min-height: 60px;
  width: 400px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(231, 231, 231);
  /* background: #409eff; */
}
.chatRecord{
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  width: 200px;
}
.friendAvatar{
  width: 60px;
  height: 60px;
}
.bottomName{
  border-top: 1px solid #ccc;
  float: left;
  height: 20px;
  width: 100%;
  margin: 0 !important;
  text-indent: 0px;
  margin-top: 5px !important;

}
.titleMessageBoxBox{
  display: block;
  padding-left: 12px;
  max-width: 250px;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
p{
  margin: 0;
}
#playAudio{
  position: absolute;
  font-size: 23px;
  color: #dfdfdf;
  top: 34.5%;
  left:34.5%;
  cursor: pointer;
  margin: auto;
}
.bottomBorder{
  border-bottom: 1px solid rgb(224, 224, 224);
}
.AudioLogo{
  position: relative;
  width: 78.14px;
  height: 78.14px;
  background: #e2e2e2;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.itemAudio{
  height: 60px;
  width: 412px;
  background: #f3f3f3;
  width: 100%;
  padding: 9.3px;
  display: flex;
  align-items: center;
  overflow: hidden;
  /*text-overflow:ellipsis;*/
  /*white-space: nowrap;*/
  word-wrap: wrap;
}
.pathBox{
  height: 100px;
  width: 100%;
  font-size: 12px;
}
.audioBox{
  width: 100%;
  height: 150px;
  display: flex;
  padding: 0 15px;
}
.infoYuYin{
  position: absolute;
  top: -7px;
  right: -7px;
  color: rgb(192, 192, 192);
  transition: .1s linear;
}
.infoYuYin:hover{
  color: #409eff;
  transition: .1s linear;
  transform: scale(1.1);
}

.yuyin{
  cursor: pointer;
  position: relative;
  width: 60%;
}
.nameSiren{
  height: 15.6px;
  width: 250px;
  float: left;
  margin: 0 !important;
  border-top: 1px solid rgb(219, 219, 219);
  text-indent: 18px;
}

.contentNameCard{
  height: 56.26px;
  width: 100%;
  padding: 10px 20px;
  display: flex;
}
.nameCard{
  width: 250px;
  min-height: 73.6px;
  background: rgb(243, 243, 243);
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  cursor: pointer;
}
.hongbaotext{
  position: absolute;
  right: 25px;
  top: 15px;
  color: #Fff;

}
.fenyeqi{
  /* float: left; */
  margin-top: 10px;
}
.mainContentBoxMessage{
  height: 500px;
}
.mapBox{
    width: 100px;
    height: 80px;
    /* float: left; */
}
.mapTitle{
    width: 100%;
    height: 50px;
    padding: .03rem;
    float: left;

}
.map{
    width: 233px;
    height: 206px;
    background: #fff;
    border-radius: 4px;
}
.messageImg{
    display: block;
    width: 100%;
    height: 100%;
}
.chat-sender{
 margin-top: 0 !important;
}
.messageBoxFather{
  width: 100%;
  /* min-width:429px; */

}
.messageBox {
    width: 100%;
    min-height:800px;
    margin:0 auto;
    padding: 10px 10px;
    background: rgb(253, 253, 253);
    height: 98vh;
    overflow-y: auto;
    border-radius: 5px;
    padding-bottom:150px;
   
    /* box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1) */
}
.messageContentTitle {
  height: 56.26px;
  background: rgb(255, 255, 255);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  border-radius: 5px;
  margin-bottom: 10px;
}
.friendName {
  line-height: 22.39px;
  font-size:13px;
}
</style>

<style scoped>
.leftMessage{

}
/* 气泡样式 */
body {
  background-color: #ebebeb;
  font-family: -apple-system;
  font-family: "-apple-system", "Helvetica Neue", "Roboto", "Segoe UI",
    sans-serif;
}
.chat-sender {
  clear: both;
  font-weight: bold;
}
.chat-sender div:nth-of-type(1) {
  float: left;
}
.chat-sender div:nth-of-type(2) {
  margin: 0 20px 2px 50px;
  padding: 0px;
  color: #848484;
  /* font-size: 60%; */
  text-align: left;
}
.chat-sender div:nth-of-type(3) {
  background-color: rgb(233, 233, 233);
  float: left;
  max-width: 250px;
  margin: 0 20px 10px 10px;
  padding: 10px 10px 10px 10px;
  border-radius: 7px;
  text-indent: -12px;
}

.chat-receiver {
  clear: both;
  font-weight: bold;
}
.chat-receiver div:nth-of-type(1) {
  float: right;
}
.chat-receiver div:nth-of-type(2) {
  margin: 0px 50px 2px 50px;
  padding: 0px;
  color: #848484;
  /* font-size: 60%; */
  text-align: right;
}
.chat-receiver div:nth-of-type(3) {
  float:right;
  max-width: 250px;
  background-color: #b2e281;
  margin: 0px 10px 10px 10px;
  padding: 10px 10px 10px 10px;
  border-radius: 7px;
}

.chat-receiver div:first-child img,
.chat-sender div:first-child img {
  width: 40px;
  height: 40px;
  /*border-radius: 10%;*/
}

.chat-left_triangle {
  height: 0px;
  width: 0px;
  border-width: 6px;
  border-style: solid;
  border-color: transparent rgb(233, 233, 233) transparent transparent;
  position: relative;
  left: -22px;
  top: 3px;
  overflow: hidden;
}

.chat-right_triangle {
  height: 0px;
  width: 0px;
  border-width: 6px;
  border-style: solid;
  border-color: transparent transparent transparent #b2e281;
  position: relative;
  right: -22px;
  top: 3px;
}

.chat-notice {
  clear: both;
  font-size: 70%;
  color: white;
  text-align: center;
  margin-top: 15px;
  margin-bottom: 15px;
}
.chat-notice span {
  background-color: #ececec;
  line-height: 25px;
  border-radius: 5px;
  padding: 5px 10px;
}

.messageBox::-webkit-scrollbar {
  width: 8px;
}
/* <!--修改 滚动条的 下面 的 样式--> */
.messageBox::-webkit-scrollbar-track {
  background-color: rgb(252, 252, 252);
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
/* <!--修改 滑块 --> */
.messageBox::-webkit-scrollbar-thumb {
  background-color: #dfdfdf;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
.hongbaotext{
  width: 100px;
  position: absolute;
  right: 50px;
  top: 30px;
  color: #Fff;
  font-size: 12px;
}

/* 当屏幕宽度大于2560时 */
@media screen and (min-width: 2360px) {
  .nameSiren{
  height: 0.06rem;
  width: 1rem;
  float: left;
  margin: 0 !important;
  border-top: 1px solid rgb(219, 219, 219);
  text-indent: .07rem;
}

.contentNameCard{
  height: 0.24rem;
  width: 100%;
  padding: 10px 20px;
  display: flex;
}
.nameCard{
  width: 1rem;
  height: .31rem;
  background: rgb(243, 243, 243);
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  cursor: pointer;
}
.hongbaotext{
  position: absolute;
  width: 150px;
  right: .15rem;
  top: .1rem;
  color: #Fff;
font-size: 13px;
}
  .messageBox {
    margin:0 auto;
    /* width: 1.7rem; */
    /* min-height:800px; */
    padding: 10px 20px;
    background: rgb(253, 253, 253);
    /* height: 4.54rem; */
    max-height: 81vh;
    /* height: auto; */
    /* height: 600px; */
    /* overflow-y: auto; */
    border-radius: 5px;
    padding-bottom:150px;
    /* box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); */
}

.chat-receiver div:nth-of-type(3) {
  float:right;
  max-width: 1.1rem;
  background-color: #b2e281;
  margin: 0px 10px 10px 20px;
  padding: 10px 10px 10px 10px;
  border-radius: 7px;
}

.chat-sender div:nth-of-type(3) {
  background-color: rgb(233, 233, 233);
  float: left;
  max-width: 1.1rem;
  margin: 0 20px 10px 10px;
  padding: 10px 10px 10px 10px;
  border-radius: 7px;
  text-indent: -12px;
}
.map{
    width: 1rem;
    height: 1rem;
    background: #fff;
    border-radius: 4px;
}

.mapTitle{
    width: 100%;
    height: .2rem;
    padding: .03rem;
    float: left;
}
.friendName {
  line-height: 0.1rem;
  font-size: 0.07rem;
}
.messageContentTitle {
  height: 0.3rem;
  width: 1.7rem;
  background: rgb(255, 255, 255);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  border-radius: 5px;
  border-bottom: 1px solid rgb(230, 230, 230);
  margin-bottom: 10px;
}
.messageBoxFather{
  /* width: 1.1rem; */
  min-width:403px;

}
.AudioLogo{
  position: relative;
  width: .5rem;
  height: .5rem;
  background: #e2e2e2;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.itemAudio{
  min-height: .25rem;
  width: 412px;
  background: #f3f3f3;
  padding: .06rem;
  display: flex;
  align-items: center;
  /* overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap; */
  word-wrap: break-word

}
.pathBox{
  height: .5rem;
  width: 100%;
}
.audioBox{
  width: 100%;
  height: .5rem;
  display: flex;
  padding: 0 .1rem;
}
.hrefBox{
  width: 1rem;
  height:.2rem;
  display: flex;
  align-items: center;
}
.hrefBox>div{
  height: .2rem;
}
.hrefBoxLeftBox{
  width: .8rem;
}

.hrefBoxrightBox{
  width: .2rem;
  margin: 0 !important;
}
.hrefBoxContentDeatils{
  width: .7rem;
  height: .2;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.textInfo{
  float: left;
  width: 1rem;
  margin: 0 !important;
  border-top: 1px solid #ccc;
  padding-top: 2px !important;
}
.grefTitleSpan{
  display: block;
  width: .7rem;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
#playAudio{
  position: absolute;
  font-size: .16rem;
  color: #dfdfdf;
  top: 34.5%;
  left:34.5%;
  cursor: pointer;
  margin: auto;
}
.screenBox{
  height: 85vh;
  background: #fff;
  overflow: hidden;
}
}
</style>
